/* 全局样式 */
html, body {
    height: var(--full-height);
    margin: 0;
    padding: 0;
    width: 100vw;
}

html {
    line-height: 1.3;
    text-size-adjust: 100%;
    tab-size: 4;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
    border: 0 solid var(--border-color);
}

body {
    font: 14px var(--font-family);
    background-color: var(--gray);
    color: var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    touch-action: pan-x pan-y;
    transition: background-color 0.3s ease;
}

@media only screen and (max-width: 600px) {
    body {
        background-color: var(--second);
    }
}

/* 元素默认样式 */
hr {
    border: 0;
    border-top: 1px solid currentColor;
    color: inherit;
}

h1, h2, h3, h4, h5, h6,
blockquote, dl, dd, p, pre,
ol, ul, menu, fieldset, legend,
figure {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b, strong {
    font-weight: bolder;
}

code, kbd, samp, pre {
    font-family: var(--monospace-font);
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0;
}

button, input, optgroup, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

:-moz-focusring, :focus-visible {
    outline: auto;
}

:-moz-ui-invalid {
    box-shadow: none;
}

progress {
    vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

summary {
    display: list-item;
}

input::placeholder,
textarea::placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: var(--placeholder-color);
}

button[disabled], [role="button"][disabled] {
    cursor: default;
}

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}

img, video, audio {
    max-width: 100%;
    height: auto;
}

/* 动画 */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-from-top {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 窗口头部样式 */
.window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 8px 16px;
    height: 55px;
    background: var(--theme-color);
    border-bottom: var(--border-in-light);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.window-header-title {
    max-width: calc(100% - 100px);
    overflow: hidden;
}

.window-header-main-title {
    display: block;
    max-width: 48vw;
    font-size: 16px;
    font-weight: bolder;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.window-header-sub-title {
    font-size: 14px;
    margin-top: 2px;
}

.window-header-sub-title span {
    margin-right: 6px;
}

.window-header-sub-title span:last-child {
    margin-right: 0;
}

.window-actions {
    display: inline-flex;
}

.window-action-button {
    margin-left: 10px;
}



/* Define default (light) theme variables */
:root {
    /* General Settings */
    --full-height: 100%;
    --border-color: #e5e7eb;
    --placeholder-color: #9ca3af;
    --window-width: 94vw;
    --window-height: 94vh;
    --sidebar-width: 300px;
    --window-content-width: calc(100% - var(--sidebar-width));
    --message-max-width: 80%;
    
    /* Color Palette */
    --theme: light;
    --color-scheme: light;
    
    --white: #fff;
    --black: #303030;
    --gray: #fafafa;
    --silver: #ccc;
    --primary: #1d93ab;
    --second: #e7f8ff;
    --hover-color: #f3f3f3;
    --bar-color: rgba(0, 0, 0, 0.1);
    --theme-color: var(--gray);
    
    /* Shadows */
    --shadow: 50px 50px 100px 10px rgba(0, 0, 0, 0.1);
    --card-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
    
    /* Borders */
    --border-in-light: 1px solid #dedede;
    
    /* Syntax Highlighting Colors */
    --color-prettylights-syntax-comment: #6e7781;
    --color-prettylights-syntax-constant: #0550ae;
    --color-prettylights-syntax-entity: #8250df;
    --color-prettylights-syntax-storage-modifier-import: #24292f;
    --color-prettylights-syntax-entity-tag: #116329;
    --color-prettylights-syntax-keyword: #cf222e;
    --color-prettylights-syntax-string: #0a3069;
    --color-prettylights-syntax-variable: #953800;
    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
    --color-prettylights-syntax-carriage-return-bg: #cf222e;
    --color-prettylights-syntax-string-regexp: #116329;
    --color-prettylights-syntax-markup-list: #3b2300;
    --color-prettylights-syntax-markup-heading: #0550ae;
    --color-prettylights-syntax-markup-italic: #24292f;
    --color-prettylights-syntax-markup-bold: #24292f;
    --color-prettylights-syntax-markup-deleted-text: #82071e;
    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
    --color-prettylights-syntax-markup-inserted-text: #116329;
    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
    --color-prettylights-syntax-markup-changed-text: #953800;
    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
    --color-prettylights-syntax-meta-diff-range: #8250df;
    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
    
    /* Foreground and Background Colors */
    --color-fg-default: #24292f;
    --color-fg-muted: #57606a;
    --color-fg-subtle: #6e7781;
    --color-canvas-default: transparent;
    --color-canvas-subtle: #f6f8fa;
    --color-border-default: #d0d7de;
    --color-border-muted: #d8dee4;
    --color-neutral-muted: rgba(175, 184, 193, 0.2);
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-attention-subtle: #fff8c5;
    --color-danger-fg: #cf222e;
    
    /* Color Scheme for Syntax Highlighting */
    color-scheme: var(--color-scheme);
}

/* Dark Theme Overrides */
.dark {
    --theme: dark;
    --color-scheme: dark;
    
    --white: #1e1e1e;
    --black: #bbb;
    --gray: #151515;
    --silver: #666;
    --second: #1b262a;
    --hover-color: #323232;
    --bar-color: hsla(0, 0%, 100%, 0.1);
    --border-in-light: 1px solid hsla(0, 0%, 100%, 0.192);
    --theme-color: var(--gray);
    
    /* Shadows */
    --card-shadow: 0px 4px 8px rgba(255, 255, 255, 0.1);
    
    /* Syntax Highlighting Colors */
    --color-prettylights-syntax-comment: #8b949e;
    --color-prettylights-syntax-constant: #79c0ff;
    --color-prettylights-syntax-entity: #d2a8ff;
    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
    --color-prettylights-syntax-entity-tag: #7ee787;
    --color-prettylights-syntax-keyword: #ff7b72;
    --color-prettylights-syntax-string: #a5d6ff;
    --color-prettylights-syntax-variable: #ffa657;
    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
    --color-prettylights-syntax-carriage-return-bg: #b62324;
    --color-prettylights-syntax-string-regexp: #7ee787;
    --color-prettylights-syntax-markup-list: #f2cc60;
    --color-prettylights-syntax-markup-heading: #1f6feb;
    --color-prettylights-syntax-markup-italic: #c9d1d9;
    --color-prettylights-syntax-markup-bold: #c9d1d9;
    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
    --color-prettylights-syntax-markup-deleted-bg: #67060c;
    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
    --color-prettylights-syntax-markup-inserted-bg: #033a16;
    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
    
    /* Foreground and Background Colors */
    --color-fg-default: #c9d1d9;
    --color-fg-muted: #8b949e;
    --color-fg-subtle: #6e7681;
    --color-canvas-subtle: #161b22;
    --color-border-default: #30363d;
    --color-border-muted: #21262d;
    --color-neutral-muted: hsla(215, 8%, 47%, 0.4);
    --color-accent-fg: #58a6ff;
    --color-accent-emphasis: #1f6feb;
    --color-attention-subtle: rgba(187, 128, 9, 0.15);
    --color-danger-fg: #f85149;
}

.dark div:not(.no-dark) > svg,
@media (prefers-color-scheme: dark) {
    div:not(.no-dark) > svg {
        filter: invert(0.5);
    }
}

/* Responsive Design for Mobile Devices */
@media only screen and (max-width: 600px) {
    :root {
        --window-width: 100vw;
        --window-height: var(--full-height);
        --sidebar-width: 100vw;
        --window-content-width: var(--window-width);
        --message-max-width: 100%;
    }

    .no-mobile {
        display: none;
    }

    .modal-mask {
        align-items: flex-end;
    }
}

/* Theme Detection via Media Query */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode variables are handled by the .dark class */
    }

    /* Ensure SVGs adapt to dark mode */
    div:not(.no-dark) > svg {
        filter: invert(0.5);
    }
}

/* Component Styles */

/* Select Dropdown */
select {
    border: var(--border-in-light);
    padding: 10px;
    border-radius: 10px;
    appearance: none;
    background-color: var(--white);
    color: var(--black);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Labels */
label {
    cursor: pointer;
}

/* Custom Alert */
.custom_alert1 {
    background-color: #fff;
    border-radius: 20px;
    text-align: center;
}

.custom_alert1 .layui-layer-content {
    padding: 6px;
    font-size: 16px;
}

/* Input Fields */
input {
    text-align: center;
    font-family: inherit;
}

input[type="checkbox"],
input[type="range"] {
    cursor: pointer;
    background-color: var(--white);
    color: var(--black);
    appearance: none;
    border: var(--border-in-light);
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

input[type="checkbox"] {
    height: 16px;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--primary);
    border-radius: 2px;
}

input[type="range"] {
    width: 100%;
    background-color: var(--white);
}

input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-ms-thumb {
    appearance: none;
    height: 8px;
    width: 20px;
    background-color: var(--primary);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, width 0.3s ease;
    border: none;
    margin-left: 5px;
}

input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-moz-range-thumb:hover,
input[type="range"]::-ms-thumb:hover {
    transform: scaleY(1.2);
    width: 24px;
}

/* Math Overflow */
.math {
    overflow-x: auto;
}

/* Modal Mask */
.modal-mask {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    height: var(--full-height);
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

/* Links */
.link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.link:hover {
    text-decoration: underline;
    color: var(--accent-emphasis);
}

/* Code Blocks */
pre {
    position: relative;
}

pre:hover .copy-code-button {
    pointer-events: all;
    transform: translateX(0);
    opacity: 0.5;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.copy-code-button {
    position: absolute;
    right: 10px;
    top: 1em;
    cursor: pointer;
    padding: 0 5px;
    background-color: var(--black);
    color: var(--white);
    border: var(--border-in-light);
    border-radius: 10px;
    transform: translateX(10px);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.copy-code-button::after {
    content: "copy";
}

.copy-code-button:hover {
    opacity: 1;
}


.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.clickable:hover,
.clickable:active {
    opacity: 0.8;
}


/* Error Messages */
.error {
    width: 80%;
    border-radius: 20px;
    border: var(--border-in-light);
    box-shadow: var(--card-shadow);
    padding: 20px;
    background-color: var(--white);
    color: var(--black);
    overflow: auto;
}

.error pre {
    overflow: auto;
}

/* Password Input Container */
.password-input-container {
    max-width: 50%;
    display: flex;
    justify-content: flex-end;
}

.password-input-container .password-eye {
    margin-right: 4px;
}

.password-input-container .password-input {
    min-width: 80%;
}

/* User Avatar */
.user-avatar {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-in-light);
    box-shadow: var(--card-shadow);
    border-radius: 10px;
}

/* Single Line Text */
.one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* 覆盖层 */
.overlay {
    position: fixed;
    inset: 0; /* 等同于 top: 0; right: 0; bottom: 0; left: 0; */
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9999;
}

.overlay img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

/* 按钮样式 */
.button_icon-button {
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    user-select: none;
    outline: none;
    color: var(--black);
    background-color: transparent; /* 默认背景透明 */
}


.button_icon-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.button_icon-button-text {
    padding:5px 2px;
    margin:0;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* 主要按钮变体 */
.button_icon-button.button_primary,
.button_icon-button.button_primaryyy {
    background-color: var(--primary);
    color: #fff;
}

.button_icon-button.button_primaryyy {
    background-color: #5a98a6;
    width: 60%;
    margin: 0 auto;
    padding: 4px;
    display: none;
}

.button_icon-button.button_primary path,
.button_icon-button.button_primaryyy path {
    fill: #fff !important;
}

/* 按钮悬停效果 */
.button_icon-button:hover {
    border-color: var(--primary);
}

/* 按钮图标 */
.button_icon-button-icon {
    padding: 3px 12px;
    margin: 0;
    width: 12px;
    height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.window-action-button .button_icon-button-icon {
    padding: 15px 9px;
}

#go{
    padding:6px 10px;
}


/* 按钮阴影和边框 */
.button_shadow {
    box-shadow: var(--card-shadow);
    background: var(--white);
}

.button_border {
    border: var(--border-in-light);
}

/* 应用栏 */
.home_sidebar {
    position: relative;
    top: 0;
    width: var(--sidebar-width);
    padding: 10px;
    background-color: var(--second);
    display: flex;
    flex-direction: column;
    box-shadow: inset -2px 0 2px rgba(0, 0, 0, 0.05);
    transition: width 0.05s ease;
    box-sizing: border-box;
}

.home_sidebar-header-bar {
    display: flex;
    margin-bottom: 20px;
}

.home_sidebar-header-bar .home_sidebar-bar-button {
    flex: 1;
    background: var(--white);
}

.home_sidebar-header-bar .home_sidebar-bar-button:not(:last-child) {
    margin-right: 10px;
}

/* 容器样式 */
.home_container,
.home_tight-container {
    border: var(--border-in-light);
    border-radius: 15px;
    box-shadow: var(--shadow);
    color: var(--black);
    background-color: var(--white);
    min-width: 768px;
    min-height: 480px;
    max-width: 1200px;
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    width: var(--window-width);
    height: var(--window-height);
}

.home_tight-container {
    --window-width: 100vw;
    --window-height: var(--full-height);
    --window-content-width: calc(100% - var(--sidebar-width));
    border-radius: 0;
    border: none;
    max-width: 100vw;
    max-height: var(--full-height);
    background-color: var(--white);
}

.home_mobile {
    display: none
}



.home_window-content {
    width: var(--window-content-width);
    height: 100%;
    display: flex;
    flex-direction: column;
}



/* 侧边栏标题与logo */
.home_sidebar-header {
    position: relative;
    padding: 5px 0 10px;
}

.home_sidebar-logo {
    width: 40px;
    position: absolute;
    right: 0;
    top: 10px;
}

.home_sidebar-title {
    font-size: 20px;
    font-weight: 700;
}

#sharebutton {
    margin-top: 10px;
    width: 100%;
    cursor: pointer;
}

#notice {
    display: none;
    position: relative;
    height: 100%;
}

#notice .noticect {
    height: 100%;
    overflow: auto;
    padding: 20px;
}

.home_sidebar-sub-title {
    font-size: 12px;
    font-weight: 400;
}

.home_sidebar-body {
    flex: 1;
    overflow: auto;
    overflow-x: hidden;
}

/* 聊天项目 */
.home_chat-item {
    position: relative;
    padding: 10px 14px;
    margin: 0 8px 13px 0;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    transition: background-color 0.3s ease;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
}

.home_chat-item:hover {
    background-color: var(--hover-color);
}

.home_chat-item-selected {
    border-color: var(--primary);
}

.home_chat-item-title {
    width: 200px;
    font-size: 15px;
    font-weight: bolder;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home_chat-item-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 0.5;
}

.home_chat-item-delete:hover {
    opacity: 1;
}

.home_chat-item-info {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: #a6a6a6;
}

.home_chat-item-count,
.home_chat-item-date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home_sidebar-tail {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
}

/* 聊天窗口 */
.home_chat {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.home_chat-body {
    flex: 1;
    overflow: auto;
    padding: 3px 35px 25px;
    position: relative;
    overscroll-behavior: none;
    margin-bottom: 6px;
}

/* PC端隐藏 */
@media only screen and (min-width: 769px) {
   .home_mobile,.mobilec {
       display: none !important;
   }
}

/* 响应式设计 */
@media only screen and (max-width: 768px) {
    .home_container {
        min-height: unset;
        max-height: unset;
        min-width: unset;
        border: none;
        border-radius: 0;
    }

    .home_sidebar {
        position: absolute;
        left: -100%;
        z-index: 1000;
        height: var(--full-height);
        transition: all 0.3s ease;
        box-shadow: none;
    }

    .home_sidebar-show {
        left: 0;
    }

    .home_mobile,.mobilec{
        display: block !important;
    }

    .max_min {
        display: none;
    }

    .home_chat-body {
        padding: 2px 15px 15px 15px;
    }
}

.home_chat-message {
    display: flex;
}

.home_chat-message.system-message {
    flex-direction: row;
}

.home_chat-message-user {
     display: flex;
    flex-direction: row-reverse;
}

.home_chat-message-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: var(--message-max-width);
    margin-top: 10px;
}

.home_chat-message-user > .home_chat-message-container {
    align-items: flex-end;
}

.home_chat-message-item {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    margin-top: 30px;
    padding: 10px;
    border: var(--border-in-light);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    word-break: break-word;
    user-select: text;
}

.home_chat-message-user>.home_chat-message-container>.home_chat-message-item {
    background-color: var(--second)
}

.home_chat-message-status {
    margin-top: 5px 0 1px 0;
    font-size: 12px;
    color: #aaa;
    line-height: 1;
}

.home_chat-message-top-actions {
    position: absolute;
    top: -26px;
    right: 20px;
    display: flex;
    flex-direction: row-reverse;
    transition: opacity 0.3s ease, right 0.3s ease;
    opacity: 0;
    pointer-events: none;
    font-size: 12px;
}

.home_chat-message-container:hover .home_chat-message-top-actions {
    opacity: 1;
    right: 10px;
    pointer-events: all;
}

.home_chat-message-top-action {
    cursor: pointer;
    white-space: nowrap;
    color: var(--black);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.home_chat-message-top-action:hover {
    opacity: 1;
}

.home_chat-message-top-action:not(:first-child) {
    margin-right: 10px;
}

/* AI 按钮 */
.ai-button {
  display: flex;
  justify-content: flex-end;
  gap: 10px; /* 替代 margin 加强弹性 */
  width: 100%;
  padding-top: 5px;
  box-sizing: border-box;
  font-size: 12px;
  color: #aaa;
}

.ai-button__info {
  color: inherit; /* 继承父级文字颜色 */
}

/**g**/
.home_chat-input-panel {
    position: relative;
    width: 100%;
    padding: 8px 5px;
    box-sizing: border-box;
    flex-direction: column;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-top: var(--border-in-light); 

    /* 增强的阴影 */
    box-shadow:
        0 -6px 12px -4px rgba(0, 0, 0, 0.15), 
        var(--card-shadow);
}



.home_chat-input-panel-inner {
    display: flex;
    flex: 1 1
}

.modelno {
    text-align: center; 
    padding: 5px; 
    background-color: #f2f2f2; 
    border-radius: 5px; 
    margin: 10px auto; 
    width: 60%;
   
}

.modelaction {
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 子项水平居中 */
    gap: 10px; /* 子项之间的间隔 */
    margin: 15px 0; /* 上下外边距 */
    font-size: 14px; /* 字体大小 */
    color: #666; /* 字体颜色 */
}

.modelaction span {
    padding: 5px; /* 内边距 */
    background-color: #007bff; /* 背景色 */
    color: white; /* 文本颜色 */
    border-radius: 5px; /* 边角圆滑度 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    transition: background-color 0.3s; /* 过渡效果 */
}

.modelaction span:hover {
    background-color: #0056b3; /* 鼠标悬停时的背景色变化 */
}

/**g**/
.home_chat-input {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    border: var(--border-in-light);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, .03);
    background-color: var(--white);
    color: var(--black);
    font-family: inherit;
    padding: 10px 60px 10px 10px;
    resize: none;
    outline: none;
    overflow-y: auto; /* 确保内容超出时可以滚动 */
}


.home_chat-input:focus {
    border: 1px solid var(--primary)
}
/**g**/
.home_chat-input-send {
    padding:0;
    background-color: #6dc6bd;;
    color: #fff;
    position: absolute;
    right: 16px;
    bottom: 15px
}

.home_export-content {
    white-space: break-spaces;
    padding: 10px !important
}

.ui-lib_modal-container {
    box-shadow: var(--card-shadow);
    background-color: var(--white);
    border-radius: 12px;
    width: 60vw;
    animation: ui-lib_slide-in .3s ease;
    --modal-padding: 20px
}

.ui-lib_modal-container .ui-lib_modal-header {
    padding: var(--modal-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--border-in-light)
}

.ui-lib_modal-container .ui-lib_modal-header .ui-lib_modal-title {
    font-weight: bolder;
    font-size: 16px
}

.ui-lib_modal-container .ui-lib_modal-header .ui-lib_modal-close-btn {
    cursor: pointer
}

.ui-lib_modal-container .ui-lib_modal-header .ui-lib_modal-close-btn:hover {
    filter: brightness(1.2)
}

.ui-lib_modal-container .ui-lib_modal-content {
    max-height: 40vh;
    padding: var(--modal-padding);
    overflow: auto
}

.ui-lib_modal-container .ui-lib_modal-footer {
    padding: var(--modal-padding);
    display: flex;
    justify-content: flex-end;
    border-top: var(--border-in-light);
    box-shadow: var(--shadow)
}

.ui-lib_modal-container .ui-lib_modal-footer .ui-lib_modal-actions {
    display: flex;
    align-items: center
}

.ui-lib_modal-container .ui-lib_modal-footer .ui-lib_modal-actions .ui-lib_modal-action:not(:last-child) {
    margin-right: 20px
}


/* 模型列表容器 */
/* ---- 模型列表外层容器 ---- */
.home_prompt-hints {
  max-width: 500px;
  height: 50vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 10px;
  margin: 10px;
  z-index: 10000;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  /* 提升复合层加速动画/滑动 */
  will-change: transform;
  /* 超出剪裁容器，仅需y轴 */
  overflow: hidden;
}

/* ---- 头部：sticky + 视觉阴影 ---- */
.model-list-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--white);
  box-shadow: 0 1px 8px rgba(66,182,250,0.08);
  padding: 16px 0 8px;
  width: 100%;
  flex-shrink: 0;
  /* 限定局部重绘 */
  contain: layout paint;
}

/* ---- 按钮容器，内边距可减少冗余，方便移动端滑动 ---- */
.model-btns-container {
  width: 100%;
  position: relative;
  padding: 0 8px;
  box-sizing: border-box;
  /* overflow: visible为默认，可去掉 */
}

/* ---- 横向滚动按钮区 ---- */
.model-btns {
  display: flex;
  gap: 10px;
  padding: 0 2px;
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
  /* 隐藏滚动条（多浏览器） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  /* 小阻尼防止惯性滚动过度 */
  overscroll-behavior-x: contain;
  /* 提升移动设备滑动体验 */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* 隐藏滚动条（webkit浏览器） */
.model-btns::-webkit-scrollbar { height: 0; display: none; }

/* ---- 按钮自身 ---- */
.model-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  height: 34px;
  min-width: 0;
  line-height: 32px;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid var(--border-color);
  background: var(--white);
  color: var(--black);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, box-shadow 0.18s, border-color 0.18s;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  will-change: box-shadow;
  scroll-snap-align: center;
  outline: none;
}

/* 图标始终不插手交互：放前面间距可用margin-inline-end适配L/R语言 */
.model-btn i {
  font-size: 18px;
  margin-inline-end: 6px;
  pointer-events: none;
}

/* 如果有多个icon，只有最后不加间距 */
.model-btn i:last-child {
  margin-inline-end: 0;
}

/* hover效果更清晰，仅对非激活按钮有效，z-index可省略 */
.model-btn:not(.active):hover {
  border-color: var(--primary);
  background: var(--hover-color);
  color: var(--primary);
  box-shadow: 0 6px 18px -6px rgba(66,182,250,0.15), 0 2px 8px rgba(0,0,0,0.10);
}

/* 激活态 */
.model-btn.active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--second);
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(66,182,250,0.14);
}

/* ---- 内容主区，可以竖向滚动 ---- */
.model-content-area {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  animation: fadein .18s;
  margin: 3px 0 6px 0;
  padding: 2px 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  /* 美化滚动条 */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
/* 滚动条样式（webkit） */
.model-content-area::-webkit-scrollbar { width: 6px; }
.model-content-area::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 3px;
}

/* ---- 动画淡入 ---- */
@keyframes fadein { from{opacity:0} to{opacity:1} }

/* ---- 响应式支持小屏优化，防止溢出 ---- */
@media (max-width:600px) {
  .home_prompt-hints {
    max-width: 96vw;
    margin: 4vw 2vw;
  }
  .model-btns { gap: 8px;}
  .model-btn { font-size: 13px; padding: 0 8px; height: 32px; }
}

/* 可根据需要灵活增加暗色等主题支持 */


.home_prompt-hints .home_prompt-hint {
  color: var(--black);
  background: transparent;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  margin: 4px 12px;
  cursor: pointer;
  transition: border-color .22s, background .18s, color .18s;
}

.home_prompt-hints .home_prompt-hint:hover {
    border-color: var(--primary);
}

.modelactive {
   border-color: var(--primary) !important;
   background: var(--hover-color) !important;
   color: var(--primary) !important;
}

.home_prompt-hints .home_prompt-hint .home_hint-title,
.home_prompt-hints .home_prompt-hint .home_hint-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home_prompt-hints .home_prompt-hint .home_hint-title {
  font-size: 13px;
  font-weight: bold;
}

.home_prompt-hints .home_prompt-hint .home_hint-title span {white-space: nowrap;}

.home_prompt-hints .home_prompt-hint .mlogo,
.home_prompt-hints .home_prompt-hint .mtitle,
.home_prompt-hints .home_prompt-hint .msets {
  display: inline-block;
  vertical-align: middle;
}

.home_prompt-hints .mlogo img {
  width: 20px; height: 20px; border-radius: 50%;
  margin-right: 3px; object-fit: cover;
}

.home_prompt-hints .mtitle { font-size:13px; margin-right:10px;}
.home_prompt-hints .msets { color: #d53535;}
.home_prompt-hints .home_hint-content { font-size: 12px;}
/**模型列表结束**/




 .layui-layer-close {
    /* 自定义关闭按钮样式 */
   background-color: #ffcccc;
    color: white;
    font-size: 35px;
    width: 35px;
    height: 35px;
    line-height: 35px;
  }
  
/**指令和模型**/
#model_button .item-content,
#myrole .item-content {
    display: flex;
    align-items: center;
}

#model_button .item-content img,
#myrole .item-content img {
    width: 18px;
    height: 18px;
    margin-right: 3px;
    border-radius: 35%;
    overflow: hidden; 
}


/**输入悬浮**/
#floating-circle {
  position: fixed;
  bottom: 60px;
  right: 80px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0 0.1);
  cursor: pointer;
  z-index: 9999;
  transition: all 0.3s ease;
}

#floating-circle:hover {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#floating-circle i {
  font-size: 24px;
  color: #156b80;
  transition: color 0.3s ease;
}

#floating-circle:hover i {
  color: #555;
}

@media screen and (max-width: 768px) {
  #floating-circle {
    bottom: 25px;
    right: 25px;
    width: 30px;
    height: 30px;
  }

  #floating-circle i {
    font-size: 20px;
  }
}


.tishici {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-bottom: 1.8em;
  line-height: 1.6;
  font-style: italic;
  white-space: pre-line;  /* 保持原始换行 */
   color: var(--color-fg-default);
  font-size: 1em;  /* 略微增大字体 */
  margin: 0.3em 0.5em;  /* 增加上下间距 */
}

@media (max-width: 768px) {
  .tishici {
    font-size: 0.9em;
    padding-bottom: 1.6em;
  }
}

.tishici.expanded {
  -webkit-line-clamp: unset;
}

.tishici::after {
  content: "[展开]";
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  color: #fff;  /* 更鲜明的按钮文字颜色 */
  background-color: #666;  /* 更柔和的按钮背景色 */
  padding: 2px 10px;  /* 增大按钮区域 */
  border-radius: 15px;
  font-size: 0.8em;
  line-height: 1.8em;
  text-align: center;
  min-width: 55px;
  transition: background-color 0.3s;  /* 添加过渡效果 */
  font-style: normal;  /* 按钮文字不使用斜体 */
}

.tishici::after:hover {
  background-color: #555;  /* 悬停效果 */
}

.tishici.expanded::after {
  content: "[收起]";
}

@media (max-width: 768px) {
  .tishici::after {
    padding: 1.2px 8px;
    font-size: 0.9em;
    min-width: 46px;
  }
}


.wenti {
    background-color: var(--second);
    margin: 3px 10px;             /* 上下左右的内边距 */
    padding: 5px;             /* 上下左右的内边距 */
    border-radius: 5px;        /* 边角的圆滑度 */
    display: inline-block;     /* 设置显示属性为inline-block */
    transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
    color: var(--black);
}
.wenti:hover {
    background-color: #d0d0d0 ; /* 鼠标悬浮时的背景颜色 */
}
.wenti:active {
    background-color: var(--hover-color); /* 鼠标点击时的背景颜色 */
}

/**进度条**/
.progress {
  width: 310px; /* 修改为100%,以便自适应父容器 */
  height: 25px;
  background-color: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
  position: relative; /* 添加相对定位，以便于百分比显示 */
  margin: 0 auto; /* 水平居中 */
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #007bff;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); /* 添加条纹效果 */
  background-size: 40px 40px; /* 设置条纹大小 */
  transition: width 0.3s ease-in-out;
}

.progress-percent {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  font-size: 14px;
  color: #CCCCCC;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}

.progress-bar-danger {
  background-color: #dc3545; /* 红色背景 */
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); /* 保持条纹效果 */
  animation: progress-bar-stripes 1s linear infinite; /* 添加动画效果 */
}

@keyframes progress-bar-stripes {
  from { background-position: 40px 0; }
  to { background-position: 0 0; }
}

/**登录**/
.login-option {
    display: flex;
    cursor: pointer;
}

.login-option .btn {
    width: 100%;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
}

.btn-weixin {
    background-color: rgb(79, 128, 225);
    color: #fff;
}

.btn-email {
    background-color: #fff;
    color: #000;
}

/**充值**/
#buypanel {
  height: 100%;
}

.products-container {
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 85%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.product:hover {
    background-color: #f5f5f5;
}

.product.selected {
    background-color: #e1f9fe;
}

.product-name {
    font-weight: bold;
    width: 30%;
}

.product-price,
.product-limit,
.product-days {
    font-size: 0.8em;
    color: #666;
    margin-right: 10px;
}

.product-price {
    color: green;
}

.payment-container {
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.payment-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  margin: 5px;
}


/**滚动条**/
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: lightgrey;
    border-radius: 10px;
    background-clip: content-box;
    border: 1px solid transparent;
}

pre {
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
}


/* 右侧对话部分样式 */
.chat_chat-input-actions {
    display: flex;
    overflow-x: auto;
    line-height: 0.9;
    -webkit-overflow-scrolling: touch; /* 增强在 iOS 上的滚动惯性效果 */
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
}


.chat_chat-input-action span {
    margin-left: 3px;
}

.chat_chat-input-actions::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge 隐藏滚动条 */
}

.chat_chat-input-actions .chat_chat-input-action {
    display: inline-flex; 
    align-items: center; /* 垂直居中 */
    flex-shrink: 0; 
    border-radius: 20px;
    font-size: 12px;
    background-color: var(--white);
    color: var(--black);
    border: var(--border-in-light);
    padding: 8px; 
    box-shadow: var(--card-shadow);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease; 
    margin-bottom: 7px; 
}


.chat_chat-input-actions .chat_chat-input-action:not(:last-child) {
    margin-right: 8px;
}


/* 新增的icon容器，用于图标和计数垂直布局 */
.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 上传计数的样式 */
.icon-container .upload-count {
    font-size: 10px;
    margin: 0;
    line-height: 0.6; /*防止垂直过大*/
    color: #888;
}



/*下拉菜单调整*/
.layui-menu li, .layui-menu-body-title, .layui-menu-body-title a {
    padding: 5px 15px;
    color: var(--black);
}

.layui-panel {
     margin: 5px 0;
    background-color: var(--white);
    box-sizing: border-box;
    border: var(--border-in-light);
    border-radius: 6px; /* 圆角效果 */
}

.layui-menu {
    margin: 5px 0;
    background-color: var(--white);
   
}

.layui-menu .layui-menu-item-group>.layui-menu-body-title {
   color: var(--black);
}


/**内容输出复制按钮**/
.copyall{
  float:right;cursor:pointer
}

.button-yinyu {
    font-size: 16px;
}



/* 样式化 mjbutton 容器 */
.mjbutton {
  display: flex; /* 使用 flex 布局 */
  flex-wrap: wrap; /* 子元素换行 */
  gap: 12px; /* 按钮之间的间距 */
  justify-content: center; /* 居中排列 */
  align-items: center; /* 垂直居中 */
  padding: 15px; /* 容器的内边距 */
  background: linear-gradient(135deg, #f0f8ff, #e6f7ff); /* 背景渐变 */
  border: 1px solid #d0d0d0; /* 边框颜色 */
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  max-width: 600px; /* 最大宽度限制 */
  margin: auto; /* 居中整个容器 */
}

/* 样式化按钮 */
.mjbutton button {
  background-color: #007BFF; /* 按钮背景色 */
  color: white; /* 文本颜色 */
  border: none; /* 无默认边框 */
  border-radius: 5px; /* 圆角按钮 */
  padding: 10px ; /* 内部间距 */
  font-size: 16px; /* 字体大小 */
  font-weight: bold; /* 加粗字体 */
  cursor: pointer; /* 鼠标悬停变成手型 */
  transition: all 0.3s ease; /* 添加平滑过渡 */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

/* 按钮悬停样式 */
.mjbutton button:hover {
  background-color: #0056b3; /* 悬停变暗色 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* 增强阴影 */
  transform: scale(1.05); /* 微缩放效果 */
}

/* 响应式设计：减少按钮之间的间距，调整按钮大小 */
@media (max-width: 768px) {
  .mjbutton {
    gap: 8px; /* 缩小距离 */
    padding: 10px; /* 缩小内边距 */
  }

  .mjbutton button {
    font-size: 14px; /* 缩小字体 */
    padding: 8px; /* 缩小按钮内边距 */
  }
}


/* Custom Layer Style */
.layui-layer-mycustom {
    background: transparent !important; /* 弹窗背景透明 */
    box-shadow: none !important; /* 去除多余的阴影 */
    border-radius: 8px !important; /* 与 userlogin.html 的圆角保持一致 */
    overflow: hidden; /* 防止内容超出圆角 */
}

.layui-layer-mycustom .content {
    padding: 0 !important; /* 移除 padding，让内容紧贴 */
    border-radius: 8px !important; /* 与弹窗保持圆角一致 */
   
}


@media screen and (max-width: 768px) {
    .ui-lib_modal-container {
        width: 100vw;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    .ui-lib_modal-container .ui-lib_modal-content {
        max-height: 50vh
    }
    
     .home_chat-input {
        font-size: 12px
    }
}


/**g-聊天体字体**/
.markdown-body {
  --font-size: 16px;
  --line-height: 1.5;
  --font-weight-semibold: 600;

  color: var(--color-fg-default);
  background-color: var(--color-canvas-default);
  font-size: var(--font-size);
  line-height: var(--line-height);
  word-wrap: break-word;
  margin: 0;
  text-size-adjust: 100%; /* 简化 -ms 和 -webkit 前缀 */
}




/* 标题样式 */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 24px 0 16px;
  padding-bottom: 0.3em;
  font-weight: var(--base-text-weight-semibold, 600);
  line-height: 1.25;
}

.markdown-body h1 {
  font-size: 2em;
  border-bottom: 1px solid var(--color-border-muted);
}

.markdown-body h2 {
  font-size: 1.5em;
  border-bottom: 1px solid var(--color-border-muted);
}

.markdown-body h3 {
  font-size: 1.25em;
}

.markdown-body h4 {
  font-size: 1em;
}

.markdown-body h5 {
  font-size: 0.875em;
}

.markdown-body h6 {
  font-size: 0.85em;
  color: var(--color-fg-muted);
}

/* 标题悬停时锚点图标 */
.markdown-body h1:hover .anchor .octicon-link:before,
.markdown-body h2:hover .anchor .octicon-link:before,
.markdown-body h3:hover .anchor .octicon-link:before,
.markdown-body h4:hover .anchor .octicon-link:before,
.markdown-body h5:hover .anchor .octicon-link:before,
.markdown-body h6:hover .anchor .octicon-link:before {
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
  -webkit-mask-image: none;
  width: 16px;
  height: 16px;
  content: " ";
  display: inline-block;
  background-color: currentColor;
}

/* 链接样式 */
.markdown-body a {
  color: var(--color-accent-fg);
  text-decoration: none;
  background-color: transparent; 
}

.markdown-body a:hover {
  text-decoration: underline;
}

.markdown-body a:not([class]) {
  /* 可添加特殊样式，如果需要 */
}

/* 省略号和粗体 */
.markdown-body abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}

.markdown-body b,
.markdown-body strong {
  font-weight: var(--font-weight-semibold);
}

.markdown-body kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: 1px solid var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}

/* 布局元素 */
.markdown-body details,
.markdown-body figcaption,
.markdown-body figure {
  display: block;
}

.markdown-body figure {
  margin: 1em 40px;
}

.markdown-body summary {
  cursor: pointer;
}

.markdown-body details:not([open]) > :not(summary) {
  display: none !important; 
}

.markdown-body dfn {
  font-style: italic;
}

/* 水平线 */
.markdown-body hr {
  box-sizing: content-box;
  overflow: hidden;
  height: 0.25em;
  margin: 24px 0;
  border: 0;
  background-color: var(--color-border-default);
}

.markdown-body hr::before,
.markdown-body hr::after { 
  content: "";
  display: table;
}

.markdown-body hr::after {
  clear: both;
}

/* 表格 */
.markdown-body table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
}

.markdown-body td,
.markdown-body th {
  padding: 0;
}

/* 输入框样式 */
.markdown-body input {
  font: inherit;
  margin: 0;
  overflow: visible;
}

.markdown-body input::placeholder {
  color: var(--color-fg-subtle);
  opacity: 1;
}

.markdown-body input[type="button"],
.markdown-body input[type="reset"],
.markdown-body input[type="submit"] {
  -webkit-appearance: button; 
}

.markdown-body input[type="checkbox"],
.markdown-body input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/* 数字输入框的去除箭头 */
.markdown-body input[type="number"]::-webkit-inner-spin-button,
.markdown-body input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/* 搜索输入框的去除装饰 */
.markdown-body input[type="search"]::-webkit-search-cancel-button,
.markdown-body input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; 
}

/* 标记文本 */
.markdown-body mark {
  background-color: var(--color-attention-subtle);
  color: var(--color-fg-default);
}

/* 小号文本 */
.markdown-body small {
  font-size: 90%;
}

/* 上下标 */
.markdown-body sub,
.markdown-body sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.markdown-body sub {
  bottom: 0.25em;
}

.markdown-body sup {
  top: 0.5em;
}

/* 隐藏元素 */
.markdown-body [hidden] {
  display: none !important;
}

/* 聚焦样式 */
.markdown-body a:focus,
.markdown-body a:focus-visible,
.markdown-body [role="button"]:focus,
.markdown-body [role="button"]:focus-visible,
.markdown-body input[type="checkbox"]:focus,
.markdown-body input[type="checkbox"]:focus-visible,
.markdown-body input[type="radio"]:focus,
.markdown-body input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-accent-fg);
  outline-offset: -2px;
  box-shadow: none;
}

.markdown-body a:not([class]):focus,
.markdown-body a:not([class]):focus-visible,
.markdown-body [role="button"]:focus,
.markdown-body [role="button"]:focus-visible,
.markdown-body input[type="checkbox"]:focus,
.markdown-body input[type="checkbox"]:focus-visible,
.markdown-body input[type="radio"]:focus,
.markdown-body input[type="radio"]:focus-visible {
  outline-offset: 0;
}

/* 移除非 focus-visible 的 outline */
.markdown-body a:focus:not(:focus-visible),
.markdown-body [role="button"]:focus:not(:focus-visible),
.markdown-body input[type="checkbox"]:focus:not(:focus-visible),
.markdown-body input[type="radio"]:focus:not(:focus-visible) {
  outline: none; 
}





.markdown-body blockquote {
    margin: 0;
    padding: 0 1em;
    color: var(--color-fg-muted);
    border-left: .25em solid var(--color-border-default)
}

.markdown-body ol,
.markdown-body ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 2em
}

.markdown-body ol ol,
.markdown-body ul ol {
    list-style-type: lower-roman
}

.markdown-body ol ol ol,
.markdown-body ol ul ol,
.markdown-body ul ol ol,
.markdown-body ul ul ol {
    list-style-type: lower-alpha
}

.markdown-body dd {
    margin-left: 0
}

.markdown-body code,
.markdown-body pre,
.markdown-body samp,
.markdown-body tt {
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    font-size: 12px
}

.markdown-body pre {
    margin-top: 0;
    margin-bottom: 0;
    word-wrap: normal
}

.markdown-body .octicon {
    display: inline-block;
    overflow: visible !important;
    vertical-align: text-bottom;
    fill: currentColor
}

.markdown-body input::-webkit-inner-spin-button,
.markdown-body input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none
}

.markdown-body:after,
.markdown-body:before {
    display: table;
    content: ""
}

.markdown-body:after {
    clear: both
}

.markdown-body>:first-child {
    margin-top: 0 !important
}

.markdown-body>:last-child {
    margin-bottom: 0 !important
}

.markdown-body a:not([href]) {
    color: inherit;
    text-decoration: none
}

.markdown-body .absent {
    color: var(--color-danger-fg)
}

.markdown-body .anchor {
    float: left;
    padding-right: 4px;
    margin-left: -20px;
    line-height: 1
}

.markdown-body .anchor:focus {
    outline: none
}

.markdown-body blockquote,
.markdown-body details,
.markdown-body dl,
.markdown-body ol,
.markdown-body pre,
.markdown-body table,
.markdown-body ul {
    margin-top: 0;
    margin-bottom: 10px
}

.markdown-body blockquote>:first-child {
    margin-top: 0
}

.markdown-body blockquote>:last-child {
    margin-bottom: 0
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
    color: var(--color-fg-default);
    vertical-align: middle;
    visibility: hidden
}

.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
    text-decoration: none
}

.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
    visibility: visible
}

.markdown-body h1 code,
.markdown-body h1 tt,
.markdown-body h2 code,
.markdown-body h2 tt,
.markdown-body h3 code,
.markdown-body h3 tt,
.markdown-body h4 code,
.markdown-body h4 tt,
.markdown-body h5 code,
.markdown-body h5 tt,
.markdown-body h6 code,
.markdown-body h6 tt {
    padding: 0 .2em;
    font-size: inherit
}

.markdown-body summary h1,
.markdown-body summary h2,
.markdown-body summary h3,
.markdown-body summary h4,
.markdown-body summary h5,
.markdown-body summary h6 {
    display: inline-block
}

.markdown-body summary h1 .anchor,
.markdown-body summary h2 .anchor,
.markdown-body summary h3 .anchor,
.markdown-body summary h4 .anchor,
.markdown-body summary h5 .anchor,
.markdown-body summary h6 .anchor {
    margin-left: -40px
}

.markdown-body summary h1,
.markdown-body summary h2 {
    padding-bottom: 0;
    border-bottom: 0
}

.markdown-body ol.no-list,
.markdown-body ul.no-list {
    padding: 0;
    list-style-type: none
}

.markdown-body ol[type=a] {
    list-style-type: lower-alpha
}

.markdown-body ol[type=A] {
    list-style-type: upper-alpha
}

.markdown-body ol[type=i] {
    list-style-type: lower-roman
}

.markdown-body ol[type=I] {
    list-style-type: upper-roman
}

.markdown-body div>ol:not([type]),
.markdown-body ol[type="1"] {
    list-style-type: decimal
}

.markdown-body ol ol,
.markdown-body ol ul,
.markdown-body ul ol,
.markdown-body ul ul {
    margin-top: 0;
    margin-bottom: 0
}

.markdown-body li>p {
    margin-top: 16px
}

.markdown-body li+li {
    margin-top: .25em
}

.markdown-body li {
    list-style-type: decimal;
}

.markdown-body li {
    list-style-type: decimal;
}

.markdown-body dl {
    padding: 0
}

.markdown-body dl dt {
    padding: 0;
    margin-top: 16px;
    font-size: 1em;
    font-style: italic;
    font-weight: var(--base-text-weight-semibold, 600)
}

.markdown-body dl dd {
    padding: 0 16px;
    margin-bottom: 16px
}

.markdown-body table th {
    font-weight: var(--base-text-weight-semibold, 600)
}

.markdown-body table td,
.markdown-body table th {
    padding: 6px 13px;
    border: 1px solid var(--color-border-default)
}

.markdown-body table tr {
    background-color: var(--color-canvas-default);
    border-top: 1px solid var(--color-border-muted)
}

.markdown-body table tr:nth-child(2n) {
    background-color: var(--color-canvas-subtle)
}

.markdown-body table img {
    background-color: transparent
}

.markdown-body img[align=right] {
    padding-left: 20px
}

.markdown-body img[align=left] {
    padding-right: 20px
}

.markdown-body .emoji {
    max-width: none;
    vertical-align: text-top;
    background-color: transparent
}

.markdown-body span.frame {
    display: block;
    overflow: hidden
}

.markdown-body span.frame>span {
    display: block;
    float: left;
    width: auto;
    padding: 7px;
    margin: 13px 0 0;
    overflow: hidden;
    border: 1px solid var(--color-border-default)
}

.markdown-body span.frame span img {
    display: block;
    float: left
}

.markdown-body span.frame span span {
    display: block;
    padding: 5px 0 0;
    clear: both;
    color: var(--color-fg-default)
}

.markdown-body span.align-center {
    display: block;
    overflow: hidden;
    clear: both
}

.markdown-body span.align-center>span {
    display: block;
    margin: 13px auto 0;
    overflow: hidden;
    text-align: center
}

.markdown-body span.align-center span img {
    margin: 0 auto;
    text-align: center
}

.markdown-body span.align-right {
    display: block;
    overflow: hidden;
    clear: both
}

.markdown-body span.align-right>span {
    display: block;
    margin: 13px 0 0;
    overflow: hidden;
    text-align: right
}

.markdown-body span.align-right span img {
    margin: 0;
    text-align: right
}

.markdown-body span.float-left {
    display: block;
    float: left;
    margin-right: 13px;
    overflow: hidden
}

.markdown-body span.float-left span {
    margin: 13px 0 0
}

.markdown-body span.float-right {
    display: block;
    float: right;
    margin-left: 13px;
    overflow: hidden
}

.markdown-body span.float-right>span {
    display: block;
    margin: 13px auto 0;
    overflow: hidden;
    text-align: right
}

.markdown-body code,
.markdown-body tt {
    padding: .2em .4em;
    margin: 0;
    font-size: 85%;
    white-space: break-spaces;
    background-color: var(--color-neutral-muted);
    border-radius: 6px
}

.markdown-body code br,
.markdown-body tt br {
    display: none
}

.markdown-body del code {
    text-decoration: inherit
}

.markdown-body samp {
    font-size: 85%
}

.markdown-body pre code {
    font-size: 100%
}

.markdown-body pre>code {
    padding: 0;
    margin: 0;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0
}

.markdown-body .highlight {
    margin-bottom: 16px
}

.markdown-body .highlight pre {
    margin-bottom: 0;
    word-break: normal
}

.markdown-body .highlight pre,
.markdown-body pre {
    padding: 16px 16px 8px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    border-radius: 6px
}

.markdown-body pre code,
.markdown-body pre tt {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: scroll;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0
}

.markdown-body .csv-data td,
.markdown-body .csv-data th {
    padding: 5px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1;
    text-align: left;
    white-space: nowrap
}

.markdown-body .csv-data .blob-num {
    padding: 10px 8px 9px;
    text-align: right;
    background: var(--color-canvas-default);
    border: 0
}

.markdown-body .csv-data tr {
    border-top: 0
}

.markdown-body .csv-data th {
    font-weight: var(--base-text-weight-semibold, 600);
    background: var(--color-canvas-subtle);
    border-top: 0
}

.markdown-body [data-footnote-ref]:before {
    content: "["
}

.markdown-body [data-footnote-ref]:after {
    content: "]"
}

.markdown-body .footnotes {
    font-size: 12px;
    color: var(--color-fg-muted);
    border-top: 1px solid var(--color-border-default)
}

.markdown-body .footnotes ol {
    padding-left: 16px
}

.markdown-body .footnotes ol ul {
    display: inline-block;
    padding-left: 16px;
    margin-top: 16px
}

.markdown-body .footnotes li {
    position: relative
}

.markdown-body .footnotes li:target:before {
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -24px;
    pointer-events: none;
    content: "";
    border: 2px solid var(--color-accent-emphasis);
    border-radius: 6px
}

.markdown-body .footnotes li:target {
    color: var(--color-fg-default)
}

.markdown-body .footnotes .data-footnote-backref g-emoji {
    font-family: monospace
}

.markdown-body .pl-c {
    color: var(--color-prettylights-syntax-comment)
}

.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v {
    color: var(--color-prettylights-syntax-constant)
}

.markdown-body .pl-e,
.markdown-body .pl-en {
    color: var(--color-prettylights-syntax-entity)
}

.markdown-body .pl-s .pl-s1,
.markdown-body .pl-smi {
    color: var(--color-prettylights-syntax-storage-modifier-import)
}

.markdown-body .pl-ent {
    color: var(--color-prettylights-syntax-entity-tag)
}

.markdown-body .pl-k {
    color: var(--color-prettylights-syntax-keyword)
}

.markdown-body .pl-pds,
.markdown-body .pl-s,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sra,
.markdown-body .pl-sr .pl-sre {
    color: var(--color-prettylights-syntax-string)
}

.markdown-body .pl-smw,
.markdown-body .pl-v {
    color: var(--color-prettylights-syntax-variable)
}

.markdown-body .pl-bu {
    color: var(--color-prettylights-syntax-brackethighlighter-unmatched)
}

.markdown-body .pl-ii {
    color: var(--color-prettylights-syntax-invalid-illegal-text);
    background-color: var(--color-prettylights-syntax-invalid-illegal-bg)
}

.markdown-body .pl-c2 {
    color: var(--color-prettylights-syntax-carriage-return-text);
    background-color: var(--color-prettylights-syntax-carriage-return-bg)
}

.markdown-body .pl-sr .pl-cce {
    font-weight: 700;
    color: var(--color-prettylights-syntax-string-regexp)
}

.markdown-body .pl-ml {
    color: var(--color-prettylights-syntax-markup-list)
}

.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms {
    font-weight: 700;
    color: var(--color-prettylights-syntax-markup-heading)
}

.markdown-body .pl-mi {
    font-style: italic;
    color: var(--color-prettylights-syntax-markup-italic)
}

.markdown-body .pl-mb {
    font-weight: 700;
    color: var(--color-prettylights-syntax-markup-bold)
}

.markdown-body .pl-md {
    color: var(--color-prettylights-syntax-markup-deleted-text);
    background-color: var(--color-prettylights-syntax-markup-deleted-bg)
}

.markdown-body .pl-mi1 {
    color: var(--color-prettylights-syntax-markup-inserted-text);
    background-color: var(--color-prettylights-syntax-markup-inserted-bg)
}

.markdown-body .pl-mc {
    color: var(--color-prettylights-syntax-markup-changed-text);
    background-color: var(--color-prettylights-syntax-markup-changed-bg)
}

.markdown-body .pl-mi2 {
    color: var(--color-prettylights-syntax-markup-ignored-text);
    background-color: var(--color-prettylights-syntax-markup-ignored-bg)
}

.markdown-body .pl-mdr {
    font-weight: 700;
    color: var(--color-prettylights-syntax-meta-diff-range)
}

.markdown-body .pl-ba {
    color: var(--color-prettylights-syntax-brackethighlighter-angle)
}

.markdown-body .pl-sg {
    color: var(--color-prettylights-syntax-sublimelinter-gutter-mark)
}

.markdown-body .pl-corl {
    text-decoration: underline;
    color: var(--color-prettylights-syntax-constant-other-reference-link)
}


.markdown-body {
  --base-text-weight-normal: 400;
}

.markdown-body g-emoji {
  display: inline-block;
  min-width: 1ch;
  font-family: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 1em;
  font-style: normal !important;
  font-weight: var(--base-text-weight-normal);
  line-height: 1;
  vertical-align: -.075em;
}

.markdown-body g-emoji img {
  width: 1em;
  height: 1em;
}

.markdown-body .task-list-item {
  list-style-type: none;
}

.markdown-body .task-list-item label {
  font-weight: var(--base-text-weight-normal);
}

.markdown-body .task-list-item.enabled label {
  cursor: pointer;
}

.markdown-body .task-list-item + .task-list-item {
  margin-top: 4px;
}

.markdown-body .task-list-item .handle {
  display: none;
}

.markdown-body .task-list-item-checkbox {
  margin: 0 .2em .25em -1.4em;
  vertical-align: middle;
}

.markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em .25em .2em;
}

.markdown-body .contains-task-list {
  position: relative;
}

.markdown-body .contains-task-list:focus-within .task-list-item-convert-container,
.markdown-body .contains-task-list:hover .task-list-item-convert-container {
  display: block;
  width: auto;
  height: 24px;
  overflow: visible;
  clip: auto;
}

.markdown-body ::-webkit-calendar-picker-indicator {
  filter: invert(50%);
}

.markdown-body pre {
  padding: 0;
}

.markdown-body code,
.markdown-body pre {
  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
}

.markdown-body pre code {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

.markdown-body code {
  padding: 1px 3px;
}

.markdown-body .hljs,
.markdown-body pre {
  background: #1a1b26;
  color: #cbd2ea;
}

.markdown-body .hljs-comment,
.markdown-body .hljs-meta {
  color: #565f89;
}

.markdown-body .hljs-deletion,
.markdown-body .hljs-doctag,
.markdown-body .hljs-regexp,
.markdown-body .hljs-selector-attr,
.markdown-body .hljs-selector-class,
.markdown-body .hljs-selector-id,
.markdown-body .hljs-selector-pseudo,
.markdown-body .hljs-tag,
.markdown-body .hljs-template-tag,
.markdown-body .hljs-variable.language_ {
  color: #f7768e;
}

.markdown-body .hljs-link,
.markdown-body .hljs-literal,
.markdown-body .hljs-number,
.markdown-body .hljs-params,
.markdown-body .hljs-template-variable,
.markdown-body .hljs-type,
.markdown-body .hljs-variable {
  color: #ff9e64;
}

.markdown-body .hljs-attribute,
.markdown-body .hljs-built_in {
  color: #e0af68;
}

.markdown-body .hljs-keyword,
.markdown-body .hljs-property,
.markdown-body .hljs-subst,
.markdown-body .hljs-title,
.markdown-body .hljs-title.class_,
.markdown-body .hljs-title.class_.inherited__,
.markdown-body .hljs-title.function_ {
  color: #7dcfff;
}

.markdown-body .hljs-selector-tag {
  color: #73daca;
}

.markdown-body .hljs-addition,
.markdown-body .hljs-bullet,
.markdown-body .hljs-quote,
.markdown-body .hljs-string,
.markdown-body .hljs-symbol {
  color: #9ece6a;
}

.markdown-body .hljs-code,
.markdown-body .hljs-formula,
.markdown-body .hljs-section {
  color: #7aa2f7;
}

.markdown-body .hljs-attr,
.markdown-body .hljs-char.escape_,
.markdown-body .hljs-keyword,
.markdown-body .hljs-name,
.markdown-body .hljs-operator {
  color: #bb9af7;
}

.markdown-body .hljs-punctuation {
  color: #c0caf5;
}

.markdown-body .hljs-emphasis {
  font-style: italic;
}

.markdown-body .hljs-strong {
  font-weight: 700;
}


/* 音频容器 */
.audio-wrapper {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: var(--white);
  border: var(--border-in-light);
  padding: 10px; /* 增加内边距 */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center; /* 保持垂直居中 */
}

/* 音频播放器样式 */
.audio-wrapper audio {
  flex: 1;
  height: 45px;
  background-color: var(--second);
  border-radius: 6px;
  outline: none;
  color: var(--black);
  margin: 0 3px; /* 增加左右间距，防止靠边 */
}

/* Chromium 浏览器媒体控件美化 */
.audio-wrapper audio::-webkit-media-controls-panel {
  background-color: var(--second);
  color: var(--black);
}

.audio-wrapper audio::-webkit-media-controls-play-button,
.audio-wrapper audio::-webkit-media-controls-pause-button {
  background-color: var(--primary);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  margin: 2px; /* 增加顶部外边距 */
}

/* 美化 Webkit 浏览器中的进度条和音量滑块 */
.audio-wrapper audio::-webkit-media-controls-timeline,
.audio-wrapper audio::-webkit-media-controls-volume-slider {
  background-color: var(--bar-color); /* 自定义 bar 背景色 */
  height: 8px; /* 设置滑块和进度条高度 */
  border-radius: 5px; /* 圆角边框 */
  margin: 0 auto; /* 确保进度条贴靠居中 */
  margin-bottom: 10px; /* 根据需要调整底部边距 */
}

/* 适应暗色背景的边框样式 */
@media (prefers-color-scheme: dark) {
  .audio-wrapper {
    background: var(--dark-background); /* 假设定义了暗色背景变量 */
    border: var(--border-in-dark); /* 定义暗色边框变量 */
  }

  .audio-wrapper audio::-webkit-media-controls-panel {
    background-color: var(--dark-second); /* 定义暗色控件背景 */
    color: var(--white);
  }

  .audio-wrapper audio::-webkit-media-controls-current-time-display,
  .audio-wrapper audio::-webkit-media-controls-time-remaining-display {
    color: var(--white);
  }
}


/****图片显示***/

.image-upload-wrapper {
    padding: 3px;
    position: relative; /* 确保子元素的绝对定位基于此 */
}

.upload-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%; /* 变为圆形 */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
    opacity: 1; /* 始终显示 */
    transition: opacity 0.3s ease;
}

.image-upload-wrapper:hover .upload-progress {
    opacity: 1; /* 悬停时显示 */
}

/* 其他保持原样 */
.markdown-body p {
    padding: 3px;
}

.markdown-body img, .markdown-body p img, .image-upload-wrapper {
    width: auto;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    box-sizing: border-box;
    display: inline-block;
    margin: 5px;
    transition: transform 0.3s;
    background-color: var(--color-canvas-default);
}

.markdown-body p img:hover,
.markdown-body p img:active,
.image-upload-wrapper:hover,
.image-upload-wrapper:active {
    transform: scale(1.1);
    cursor: pointer;
}

/* 其余选择器保持不变 */

/* 对于只有一张图片的情况,使图片占据全宽,并居中显示 */
.markdown-body p img:first-child:last-child ,.image-upload-wrapper:first-child:last-child{
    width: calc(100% - 10px); /* 减去margin的宽度 */
    display: block;
    margin: 5px auto;
}

/* 当图片数量为奇数时,最后一张图片占据全宽 */
.markdown-body p img:last-child:nth-child(odd) ,.image-upload-wrapper:last-child:nth-child(odd){
    width: calc(100% - 10px); /* 减去margin的宽度 */
    display: block;
    margin: 5px auto;
}

/* 当图片数量为偶数时,每张图片宽度为50% */
.markdown-body p img:nth-child(even),
.markdown-body p img:nth-child(odd):not(:last-child) , .image-upload-wrapper:nth-child(even), .image-upload-wrapper:nth-child(odd):not(:last-child){
    width: calc(50% - 10px); /* 减去margin的宽度,并考虑图片之间的间隔 */
    display: inline-block;
}

/**代码高亮**/
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:1px 3px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}



  .overlay img{
    max-width:100%;
    max-height:100%;
    position:relative;
}
.copy-btn{
    position:absolute;
    bottom:5%;
    left:50%;
    transform:translateX(-50%);
    background-color: rgba(255,255,255,0.7);
    color:#333;
    padding:10px 20px;
    border-radius:4px;
    cursor:pointer;
    font-size:16px;
}
.copy-btn:hover{
    background-color: rgba(255,255,255,0.9);
}


.refreschat {
  width: fit-content;
  max-width: 65%;
  margin: 30px auto 0 auto;  /* 顶部和底部分别加空间，左右自动居中 */
  padding: 6px 22px;
  background: #f4f4f5;
  color: #666;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  font-size: 14px;
  text-align: center;
  transition: box-shadow 0.18s, background 0.18s;
  cursor: pointer;
  user-select: none;
  opacity: 0.9;
}


#recordingbutton {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}