/* ============================================================
   ChatMaxima Changelog - releases feed
   Skinned to match docs.chatmaxima.com (Fumadocs neutral theme)
   Loaded only on the changelog.* knowledgebase subdomain
   ============================================================ */

.cm-changelog
{
    /* Tokens lifted from the docs bundle (--color-fd-*) */
    --fd-background: #f5f5f5;
    --fd-card: #f1f1f1;
    --fd-popover: #fafafa;
    --fd-secondary: #ededed;
    --fd-accent: rgba(209, 209, 209, 0.5);
    --fd-border: rgba(204, 204, 204, 0.5);
    --fd-foreground: #0a0a0a;
    --fd-muted-foreground: #737373;
    --fd-primary: #171717;
    --fd-primary-foreground: #fafafa;
    --fd-ring: #a3a3a3;
    --fd-line: #cccccc;
    --fd-body: #1c1c1c;
    --fd-marker: #c4c4c4;
    --fd-marker-ring: rgba(23, 23, 23, 0.08);
    --fd-r-sm: 4px;
    --fd-r-md: 6px;
    --fd-r-lg: 8px;
    --fd-r-xl: 12px;
    --fd-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --fd-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    background-color: var(--fd-background);
}

.cm-changelog .navbar
{
    background-color: var(--fd-background);
    border-bottom: 1px solid var(--fd-border);
}

.cm-changelog-shell
{
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.cm-changelog-hero,
.cm-changelog-feed
{
    background-color: var(--fd-background); /* the site theme paints bare sections white */
    font-family: var(--fd-font-sans);
}

/* ------------------------------------------------------------
   Page head
   ------------------------------------------------------------ */

.cm-changelog-hero
{
    padding: 48px 0 28px;
}

.cm-changelog-hero-top
{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.cm-changelog-hero-text
{
    flex: 1 1 320px;
    min-width: 0;
}

.cm-changelog-eyebrow
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--fd-muted-foreground);
    background-color: var(--fd-secondary);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r-md);
    padding: 3px 9px;
    margin-bottom: 14px;
}

.cm-changelog-eyebrow svg
{
    width: 12px;
    height: 12px;
}

.cm-changelog-hero h1
{
    font-family: var(--fd-font-sans);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--fd-foreground);
    margin: 0 0 10px;
}

.cm-changelog-hero p
{
    font-size: 17px;
    line-height: 1.6;
    color: var(--fd-muted-foreground);
    margin: 0;
    max-width: 66ch;
}

.cm-changelog-count
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--fd-muted-foreground);
    background-color: var(--fd-card);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r-lg);
    padding: 6px 12px;
    margin-bottom: 4px;
}

.cm-changelog-count svg
{
    width: 13px;
    height: 13px;
    opacity: 0.7;
}

/* ------------------------------------------------------------
   Feed
   ------------------------------------------------------------ */

.cm-changelog-feed
{
    padding-bottom: 64px;
}

.cm-release
{
    display: flex;
    align-items: stretch;
}

.cm-release-rail
{
    flex: 0 0 176px;
    max-width: 176px;
    padding: 6px 20px 40px 0;
}

.cm-release-rail-inner
{
    position: sticky;
    top: 24px;
}

.cm-release-date
{
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fd-foreground);
    line-height: 1.4;
}

.cm-release-ago
{
    display: block;
    font-size: 12.5px;
    color: var(--fd-muted-foreground);
    margin-top: 2px;
}

.cm-release-tags
{
    margin-top: 14px;
}

.cm-release-tag
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--fd-muted-foreground);
    background-color: var(--fd-secondary);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r-md);
    padding: 1px 8px;
    margin: 0 4px 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-release-tag svg
{
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    opacity: 0.7;
}

.cm-release-rail-author
{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--fd-muted-foreground);
}

.cm-release-rail-author img
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--fd-border);
    flex: 0 0 auto;
}

.cm-release-rail-author span
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Timeline spine + marker */

.cm-release-main
{
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    border-left: 1px solid var(--fd-border);
    padding: 0 0 32px 32px;
}

.cm-release:last-child .cm-release-main
{
    border-left-color: transparent;
    background-image: linear-gradient(to bottom, var(--fd-line) 0, var(--fd-line) 120px, transparent 100%);
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: left top;
    opacity: 1;
}

.cm-release-marker
{
    position: absolute;
    left: -5.5px;
    top: 24px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--fd-background);
    border: 1.5px solid var(--fd-marker);
    box-sizing: border-box;
}

.cm-release-latest .cm-release-marker
{
    background-color: var(--fd-primary);
    border-color: var(--fd-primary);
    box-shadow: 0 0 0 4px var(--fd-marker-ring);
}

/* ------------------------------------------------------------
   Release card
   ------------------------------------------------------------ */

.cm-release-card
{
    background-color: var(--fd-card);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r-xl);
    padding: 24px 28px 18px;
}

.cm-release-heading
{
    margin-bottom: 8px;
}

.cm-release-title /* plain text, not a link: releases have no separate page, the feed is the page */
{
    font-family: var(--fd-font-sans);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--fd-foreground);
    margin: 0;
}

.cm-release:target .cm-release-card /* deep link to a single release via #<article-alias> */
{
    border-color: var(--fd-ring);
}

.cm-release-latest-label
{
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    height: 22px;
    padding: 0 9px;
    margin-left: 10px;
    position: relative;
    top: -2px;
    border-radius: var(--fd-r-md);
    background-color: var(--fd-primary);
    color: var(--fd-primary-foreground);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1;
}

.cm-release-byline
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--fd-muted-foreground);
    margin-bottom: 18px;
}

.cm-release-byline img
{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--fd-border);
    flex: 0 0 auto;
}

.cm-release-byline strong
{
    color: var(--fd-foreground);
    font-weight: 600;
}

.cm-release-figure
{
    margin: 0 0 18px;
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r-lg);
    overflow: hidden;
    background-color: var(--fd-popover);
}

.cm-release-figure img
{
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   Release body - docs prose vocabulary
   ------------------------------------------------------------ */

.cm-release-body
{
    font-family: var(--fd-font-sans);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--fd-body);
    word-wrap: break-word;
}

.cm-release-body > *:first-child
{
    margin-top: 0;
}

.cm-release-body > *:last-child
{
    margin-bottom: 0;
}

.cm-release-body p,
.cm-release-body ul,
.cm-release-body ol,
.cm-release-body blockquote,
.cm-release-body table,
.cm-release-body pre
{
    margin: 0 0 16px;
}

.cm-release-body p,
.cm-release-body li,
.cm-release-body td
{
    line-height: 1.7; /* the site theme sets its own body leading */
}

.cm-release-body h1,
.cm-release-body h2,
.cm-release-body h3,
.cm-release-body h4,
.cm-release-body h5,
.cm-release-body h6
{
    font-family: var(--fd-font-sans);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.3px;
    color: var(--fd-foreground);
    margin: 28px 0 12px;
}

.cm-release-body h1
{
    font-size: 22px;
}

.cm-release-body h2
{
    font-size: 19px;
}

.cm-release-body h3
{
    font-size: 17px;
}

.cm-release-body h4,
.cm-release-body h5,
.cm-release-body h6
{
    font-size: 15px;
}

.cm-release-body a
{
    color: var(--fd-foreground);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--fd-ring);
}

.cm-release-body a:hover
{
    text-decoration-color: var(--fd-foreground);
}

.cm-release-body strong
{
    color: var(--fd-foreground);
    font-weight: 600;
}

.cm-release-body ul,
.cm-release-body ol
{
    padding-left: 22px;
}

.cm-release-body li + li
{
    margin-top: 6px;
}

.cm-release-body li::marker
{
    color: var(--fd-ring);
}

.cm-release-body img
{
    max-width: 100%;
    height: auto;
    border-radius: var(--fd-r-lg);
    border: 1px solid var(--fd-border);
}

.cm-release-body code
{
    font-family: var(--fd-font-mono);
    font-size: 87%;
    padding: 0.15em 0.4em;
    border-radius: var(--fd-r-md);
    background-color: var(--fd-popover);
    border: 1px solid var(--fd-border);
    color: var(--fd-foreground);
}

.cm-release-body pre
{
    padding: 16px;
    overflow: auto;
    border-radius: var(--fd-r-xl);
    background-color: var(--fd-popover);
    border: 1px solid var(--fd-border);
    font-family: var(--fd-font-mono);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fd-foreground);
}

.cm-release-body pre code
{
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: 100%;
}

.cm-release-body blockquote /* reads as a docs callout */
{
    padding: 12px 16px;
    background-color: var(--fd-popover);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r-lg);
    color: var(--fd-muted-foreground);
    font-size: 14.5px;
    line-height: 1.65;
}

.cm-release-body blockquote > *:last-child
{
    margin-bottom: 0;
}

.cm-release-body table
{
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    overflow: auto;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r-lg);
    font-size: 14px;
}

.cm-release-body table th,
.cm-release-body table td
{
    padding: 9px 14px;
    border-bottom: 1px solid var(--fd-border);
    text-align: left;
}

.cm-release-body table tr:last-child td
{
    border-bottom: 0;
}

.cm-release-body table th
{
    background-color: var(--fd-secondary);
    color: var(--fd-foreground);
    font-weight: 600;
}

.cm-release-body hr
{
    height: 1px;
    border: 0;
    background-color: var(--fd-line);
    margin: 28px 0;
}

.cm-release-body iframe
{
    max-width: 100%;
    border-radius: var(--fd-r-lg);
}

/* ------------------------------------------------------------
   Card footer
   ------------------------------------------------------------ */

.cm-release-footer
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--fd-border);
}

.cm-release-keywords
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.cm-release-keyword
{
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--fd-muted-foreground);
    background-color: var(--fd-popover);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r-md);
    padding: 1px 9px;
}

.cm-btn-release
{
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    font-family: var(--fd-font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fd-foreground);
    background-color: var(--fd-popover);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r-lg);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cm-btn-release:hover,
.cm-btn-release:focus
{
    background-color: var(--fd-accent);
    border-color: var(--fd-border);
    color: var(--fd-foreground);
    text-decoration: none;
}

.cm-btn-release svg
{
    width: 12px;
    height: 12px;
}

/* ------------------------------------------------------------
   Pager
   ------------------------------------------------------------ */

.cm-releases-pager
{
    padding: 8px 0 8px 208px;
    font-family: var(--fd-font-sans);
}

.cm-releases-pager nav
{
    display: block;
}

.cm-releases-pager .pagination
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center !important; /* library markup ships .justify-content-end */
    list-style: none;
    padding: 0;
    margin: 0;
}

.cm-releases-pager .page-item
{
    margin: 0;
}

.cm-releases-pager .page-link
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fd-muted-foreground);
    background-color: var(--fd-popover);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r-lg);
    text-decoration: none;
}

.cm-releases-pager .page-link:hover
{
    background-color: var(--fd-accent);
    border-color: var(--fd-border);
    color: var(--fd-foreground);
    text-decoration: none;
}

.cm-releases-pager .page-item.disabled .page-link
{
    background-color: var(--fd-primary);
    border-color: var(--fd-primary);
    color: var(--fd-primary-foreground);
    opacity: 1;
    cursor: default;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 767.98px)
{
    .cm-changelog-shell
    {
        padding: 0 16px;
    }

    .cm-changelog-hero
    {
        padding: 28px 0 16px;
    }

    .cm-changelog-hero h1
    {
        font-size: 27px;
    }

    .cm-changelog-hero p
    {
        font-size: 15.5px;
    }

    .cm-release
    {
        display: block;
    }

    .cm-release-rail
    {
        flex: none;
        max-width: none;
        padding: 0 0 10px;
    }

    .cm-release-rail-inner
    {
        position: static;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .cm-release-ago
    {
        display: none;
    }

    .cm-release-tags,
    .cm-release-rail-author
    {
        margin-top: 0;
    }

    .cm-release-tag
    {
        margin-bottom: 0;
    }

    .cm-release-main
    {
        border-left: 0;
        padding: 0 0 28px;
    }

    .cm-release:last-child .cm-release-main
    {
        background-image: none;
    }

    .cm-release-marker
    {
        display: none;
    }

    .cm-release-card
    {
        padding: 18px;
    }

    .cm-release-title
    {
        font-size: 20px;
    }

    .cm-releases-pager
    {
        padding-left: 0;
    }
}