/* ============================================================
   AI 模型发布时间轴 - 前台样式
   布局：主轴居中，国外条目在左、国内条目在右（窄屏回退为单栏）
   颜色：跟随主题文字色，适配明暗主题；厂商/类型徽章用专属色
   ============================================================ */

.aimt-app {
    --aimt-line: rgba(128, 128, 128, .3);
    --aimt-dot: var(--wp--preset--color--primary, #4f7cff);
    --aimt-badge-type-bg: rgba(128, 128, 128, .14);
    --aimt-note-color: rgba(128, 128, 128, .9);
    color-scheme: light dark; /* 让月份选择器等原生控件适配明暗主题 */
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 64px;
    line-height: 1.6;
}

/* ── 头部与筛选 ─────────────────────────────────────────── */

.aimt-header {
    margin-bottom: 28px;
}

.aimt-title {
    font-size: 1.75rem;
    margin: 0 0 4px;
}

.aimt-subtitle {
    margin: 0 0 18px;
    opacity: .75;
}

/* ── 筛选面板：所有控件收进一张卡片，按行分区 ──────────── */

.aimt-panel {
    padding: 14px 16px;
    border: 1px solid rgba(128, 128, 128, .18);
    border-radius: 14px;
    background: rgba(127, 127, 127, .05);
}

.aimt-panel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.aimt-panel-row + .aimt-panel-row {
    margin-top: 10px;
}

.aimt-panel-actions {
    display: flex;
    gap: 8px;
    margin-left: auto; /* 操作按钮靠右 */
}

/* 搜索：主控件，带放大镜图标（纯 CSS 背景图，免改 HTML） */
.aimt-search {
    flex: 1 1 220px;
    min-width: 170px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 14px 0 40px;
    font-size: .92rem;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: 10px;
    background-color: rgba(127, 127, 127, .07);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 16px 16px;
    color: inherit;
    transition: border-color .15s;
}

.aimt-search:focus {
    outline: none;
    border-color: var(--aimt-dot);
}

/* 类型：分段选择器（连体胶囊——与厂商芯片形成「单选组/多选标签」的形态区分） */
.aimt-type-btns {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(128, 128, 128, .22);
    border-radius: 10px;
    background: rgba(127, 127, 127, .07);
    transition: border-color .15s;
}

.aimt-type-btns:focus-within {
    border-color: var(--aimt-dot);
}

.aimt-type-btn {
    height: 28px;
    padding: 0 13px;
    font-size: .82rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--tc, inherit);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.aimt-type-btn:hover {
    background: rgba(128, 128, 128, .12);
}

.aimt-type-btn.is-active {
    background: var(--tc, #4f7cff);
    color: #fff;
    font-weight: 600;
}

/* 时间段：与类型分段器同族的成组控件 */
.aimt-range {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 38px;
    box-sizing: border-box;
    padding: 3px;
    border: 1px solid rgba(128, 128, 128, .22);
    border-radius: 10px;
    background: rgba(127, 127, 127, .07);
    transition: border-color .15s;
}

.aimt-range:focus-within {
    border-color: var(--aimt-dot);
}

.aimt-range input[type="month"] {
    height: 28px;
    box-sizing: border-box;
    padding: 0 8px;
    font-size: .85rem;
    border: none;
    background: transparent;
    color: inherit;
}

.aimt-range-sep {
    opacity: .5;
    font-size: .8rem;
    padding: 0 3px;
}

/* 次要操作 */
.aimt-reset {
    height: 38px;
    padding: 0 16px;
    font-size: .85rem;
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .15s;
}

.aimt-reset:hover {
    background: rgba(128, 128, 128, .12);
}

/* 厂商多选：虚线分区 + 组标签 + 小一号芯片（层级低于上方主控件） */
.aimt-vendor-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(128, 128, 128, .25);
}

.aimt-chip-group {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* 组标签：虚线边框 = 装饰性标注，与可点击芯片明确区分 */
.aimt-chip-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    font-size: .72rem;
    letter-spacing: .18em;
    opacity: .6;
    border: 1px dashed rgba(128, 128, 128, .35);
    border-radius: 7px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.aimt-chip-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.aimt-vchip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    font-size: .78rem;
    border: 1px solid var(--vc, #999);
    border-radius: 999px;
    background: transparent;
    color: var(--vc, inherit);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.aimt-vchip:hover {
    background: var(--vc-bg, rgba(128, 128, 128, .15));
}

.aimt-vchip.is-active {
    background: var(--vc, #4f7cff);
    color: #fff;
    font-weight: 600;
}

/* 面板页脚：统计条（出血到面板两缘） */
.aimt-panel-foot {
    margin: 14px -16px -14px;
    padding: 9px 16px;
    border-top: 1px solid rgba(128, 128, 128, .15);
    font-size: .78rem;
    opacity: .65;
}

/* ── 年份导航（吸顶）────────────────────────────────────── */

.aimt-yearnav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    margin-bottom: 20px;
    background: rgba(127, 127, 127, .12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(128, 128, 128, .18);
    border-radius: 12px;
}

.aimt-yearnav-btn {
    padding: 4px 15px;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid rgba(128, 128, 128, .4);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .15s;
}

.aimt-yearnav-btn:hover {
    background: rgba(128, 128, 128, .15);
}

.aimt-yearnav-btn.is-active {
    background: var(--aimt-dot);
    border-color: var(--aimt-dot);
    color: #fff;
    font-weight: 600;
}

/* ── 时间轴主体（主轴居中，双栏）────────────────────────── */

.aimt-timeline {
    position: relative;
}

.aimt-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 2px;
    margin-left: -1px;
    background: var(--aimt-line);
    border-radius: 2px;
}

.aimt-year {
    margin: 0;
}

/* 年份：主轴上的胶囊节点（实心底色遮住轴线） */
.aimt-year-title {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin: 30px auto 10px;
    padding: 5px 22px;
    background: var(--aimt-dot);
    color: #fff;
    border-radius: 999px;
    font-size: 1.15rem;
    letter-spacing: 1px;
}

/* 月份：主轴上的小胶囊 */
.aimt-month-title {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin: 20px auto 12px;
    padding: 2px 14px;
    background: rgba(128, 128, 128, .75);
    color: #fff;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
}

.aimt-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 条目：占半宽，国内右 / 国外左 */
.aimt-item {
    position: relative;
    width: 50%;
    padding: 10px 14px;
    border-radius: 12px;
    transition: background .15s;
}

.aimt-item:hover {
    background: rgba(128, 128, 128, .09);
}

.aimt-item.is-left {
    padding-right: 26px;
    text-align: right;
}

.aimt-item.is-right {
    margin-left: 50%;
    padding-left: 26px;
}

.aimt-item-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.aimt-item.is-left .aimt-item-main {
    justify-content: flex-end;
}

/* 轴点：取厂商专属色（--vc/--vc-bg 由 PHP 内联注入，无厂商时回退主题色） */
.aimt-dot {
    position: absolute;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--vc, var(--aimt-dot));
    box-shadow: 0 0 0 3px var(--vc-bg, rgba(79, 124, 255, .18));
}

.aimt-item.is-left .aimt-dot {
    right: -6px;
}

.aimt-item.is-right .aimt-dot {
    left: -6px;
}

/* ── 徽章 ───────────────────────────────────────────────── */

.aimt-badge {
    display: inline-block;
    padding: 1px 10px;
    font-size: .78rem;
    border-radius: 999px;
    white-space: nowrap;
}

a.aimt-badge {
    text-decoration: none;
    color: inherit;
}

/* 厂商徽章：专属色底 + 专属色字 */
.aimt-badge-vendor {
    background: var(--vc-bg, rgba(128, 128, 128, .15));
    color: var(--vc, inherit);
    font-weight: 600;
}

a.aimt-badge-vendor:hover {
    text-decoration: underline;
}

/* 类型徽章：四类四色（字体颜色 + 淡色底） */
.aimt-badge-type {
    background: var(--aimt-badge-type-bg);
}

.aimt-t-llm {
    color: #2563eb;
    background: rgba(37, 99, 235, .13);
}

.aimt-t-multimodal {
    color: #9333ea;
    background: rgba(147, 51, 234, .13);
}

.aimt-t-image {
    color: #16a34a;
    background: rgba(22, 163, 74, .13);
}

.aimt-t-video {
    color: #db2777;
    background: rgba(219, 39, 119, .13);
}

/* 阶段徽章：中性描边 */
.aimt-badge-stage {
    background: transparent;
    border: 1px solid rgba(128, 128, 128, .35);
}

.aimt-item-date {
    font-size: .85rem;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

.aimt-unverified {
    font-size: .75rem;
    padding: 1px 8px;
    border-radius: 999px;
    color: #b26a00;
    background: rgba(255, 173, 51, .18);
    cursor: help;
    white-space: nowrap;
}

.aimt-item-link {
    font-size: .95rem;
    text-decoration: none;
    padding: 0 4px;
    opacity: .7;
}

.aimt-item-link:hover {
    opacity: 1;
}

.aimt-item-note {
    margin: 4px 0 0;
    font-size: .88rem;
    color: var(--aimt-note-color);
}

/* ── 空状态 ─────────────────────────────────────────────── */

.aimt-empty {
    text-align: center;
    padding: 48px 16px;
    opacity: .8;
}

/* JS 过滤后隐藏（显式声明，防止主题样式覆盖 UA 默认行为） */
.aimt-item[hidden],
.aimt-month[hidden],
.aimt-year[hidden] {
    display: none !important;
}

/* 渐显懒加载：等待展开的条目不占位（仅 JS 添加此类，无 JS 时全量显示） */
.aimt-item.aimt-wait {
    display: none !important;
}

/* 锚点跳转时避开吸顶的年份导航条 */
.aimt-year {
    scroll-margin-top: 68px;
}

.aimt-sentinel {
    height: 2px;
}

/* ── 响应式：窄屏回退为单栏（主轴靠左）──────────────────── */

@media (max-width: 860px) {
    .aimt-app {
        padding: 16px 12px 48px;
    }

    .aimt-title {
        font-size: 1.4rem;
    }

    .aimt-search {
        flex-basis: 100%;
    }

    .aimt-panel {
        padding: 12px;
    }

    .aimt-type-btns {
        flex: 1 1 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .aimt-type-btns::-webkit-scrollbar {
        display: none;
    }

    .aimt-range {
        flex: 1 1 100%;
    }

    .aimt-range input[type="month"] {
        flex: 1;
        min-width: 0;
    }

    .aimt-panel-foot {
        margin: 12px -12px -12px;
    }

    .aimt-yearnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .aimt-yearnav::-webkit-scrollbar {
        display: none;
    }

    .aimt-timeline::before {
        left: 9px;
        margin-left: 0;
    }

    .aimt-item {
        width: auto;
        padding: 10px 8px 10px 30px;
        text-align: left;
    }

    .aimt-item.is-left {
        padding-right: 8px;
        text-align: left;
    }

    .aimt-item.is-right {
        margin-left: 0;
        padding-left: 30px;
    }

    .aimt-item.is-left .aimt-item-main {
        justify-content: flex-start;
    }

    .aimt-item .aimt-dot {
        left: 3px;
        right: auto;
    }

    .aimt-year-title {
        margin: 26px 0 8px;
    }

    .aimt-month-title {
        margin: 18px 0 10px;
    }
}

/* ── 管理员前台快速编辑（按钮仅对登录管理员渲染）──────────── */

.aimt-add-btn {
    height: 38px;
    padding: 0 16px;
    font-size: .85rem;
    border: none;
    border-radius: 10px;
    background: var(--aimt-dot);
    color: #fff;
    cursor: pointer;
}

.aimt-add-btn:hover {
    opacity: .88;
}

.aimt-edit-btn,
.aimt-verify-btn {
    border: none;
    border-radius: 6px;
    padding: 1px 8px;
    font-size: .75rem;
    cursor: pointer;
    opacity: .55;
    background: rgba(128, 128, 128, .18);
    color: inherit;
    transition: opacity .15s;
}

.aimt-edit-btn:hover,
.aimt-verify-btn:hover {
    opacity: 1;
}

.aimt-verify-btn {
    background: rgba(22, 163, 74, .16);
    color: #16a34a;
    font-weight: 600;
}

/* 弹窗 */
.aimt-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .45);
}

.aimt-modal.is-open {
    display: flex;
}

.aimt-dialog {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    color: #1f2328;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.aimt-dialog-title {
    margin: 0 0 12px;
    font-size: 1.05rem;
}

.aimt-form label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.aimt-form input[type="text"],
.aimt-form input[type="url"],
.aimt-form select,
.aimt-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 7px 10px;
    font-size: .9rem;
    font-weight: 400;
    border: 1px solid rgba(128, 128, 128, .45);
    border-radius: 8px;
    background: transparent;
    color: inherit;
}

.aimt-form textarea {
    resize: vertical;
}

.aimt-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

.aimt-check {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: end;
    margin-bottom: 10px;
}

.aimt-error {
    color: #d63638;
    font-size: .85rem;
    margin: 0 0 6px;
}

.aimt-dialog-btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.aimt-cancel {
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background: rgba(128, 128, 128, .15);
    color: #1f2328;
    cursor: pointer;
}

.aimt-save {
    padding: 7px 18px;
    border: none;
    border-radius: 8px;
    background: #4f7cff;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.aimt-save:disabled {
    opacity: .6;
    cursor: default;
}

@media (max-width: 520px) {
    .aimt-row2 {
        grid-template-columns: 1fr;
    }

    .aimt-check {
        align-self: start;
    }
}

@media (prefers-color-scheme: dark) {
    .aimt-dialog {
        background: #23272e;
        color: #e8eaf0;
    }

    .aimt-cancel {
        color: #e8eaf0;
    }
}