css
/* =========================================================
   越女剑主题 · 青竹墨影与流光剑意
   Rili 适配版
   重点：
   1. 移除滚动时容易产生闪动的动画、滤镜和强烈位移
   2. 保留代码块点击复制功能
   3. 隐藏 text 代码块顶部的语言文字
   4. 补充顶部栏、开场白、按钮栏、底部栏、分页栏、评论区
   ========================================================= */


/* =========================
   一、聊天消息气泡
   ========================= */

.group.is-user > div:first-child,
.group.is-assistant > div:first-child {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    padding: 12px !important;
    color: #2d4030 !important;
    background: #f4f9f1 !important;
    border: 1px solid #9ab993 !important;
    border-radius: 12px !important;
    box-shadow: 3px 4px 12px rgba(79, 121, 66, 0.08) !important;
}

.group.is-user > div:first-child {
    background: linear-gradient(135deg, #edf5e9 0%, #f8fbf6 100%) !important;
}

.group.is-assistant > div:first-child {
    width: 100% !important;
    background: linear-gradient(135deg, #f4f9f1 0%, #fffdf7 100%) !important;
}

/* 竹叶装饰，不使用动画，避免滑动时闪动 */
.group.is-user > div:first-child::before,
.group.is-assistant > div:first-child::before {
    content: "" !important;
    position: absolute !important;
    right: -10px !important;
    bottom: -10px !important;
    width: 100px !important;
    height: 100px !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M80 20 Q70 50 90 80 M75 25 Q60 45 70 70 M85 15 Q80 40 95 60' stroke='%2386a67a' stroke-width='1' fill='none' opacity='.2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.group.is-user > div:first-child > *,
.group.is-assistant > div:first-child > * {
    position: relative !important;
}


/* =========================
   二、Markdown 正文
   ========================= */

.rili-markdown-renderer {
    position: relative !important;
    color: #2d4030 !important;
    background: transparent !important;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    line-height: 1.65 !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

.rili-markdown-renderer p,
.rili-markdown-renderer li,
.rili-markdown-renderer blockquote {
    color: inherit !important;
}

.rili-markdown-renderer ::selection {
    color: #1b4332 !important;
    background: #dcecdf !important;
}

.rili-markdown-renderer a {
    color: #2d6a4f !important;
}

.rili-markdown-renderer blockquote {
    margin: 12px 0 !important;
    padding: 8px 12px !important;
    color: #486b4a !important;
    background: #f1f7ef !important;
    border-left: 3px solid #86a67a !important;
    border-radius: 0 6px 6px 0 !important;
}


/* =========================
   三、消息操作栏
   ========================= */

.group.is-user > div:nth-child(2),
.group.is-assistant > div:nth-child(2) {
    color: #5a7d5a !important;
}

.group.is-user > div:nth-child(2) .bg-muted.rounded.flex,
.group.is-assistant > div:nth-child(2) .bg-muted.rounded.flex {
    padding: 2px !important;
    background: rgba(237, 243, 234, 0.96) !important;
    border: 1px solid rgba(134, 166, 122, 0.38) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(45, 106, 79, 0.06) !important;
}

.group.is-user > div:nth-child(2) button,
.group.is-assistant > div:nth-child(2) button {
    color: #5a7d5a !important;
    border-radius: 5px !important;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}

.group.is-user > div:nth-child(2) button:hover,
.group.is-assistant > div:nth-child(2) button:hover {
    color: #1a2f23 !important;
    background: rgba(212, 175, 55, 0.18) !important;
    box-shadow: 0 0 7px rgba(212, 175, 55, 0.18) !important;
}

.group.is-user > div:nth-child(2) button:active,
.group.is-assistant > div:nth-child(2) button:active {
    background: rgba(134, 166, 122, 0.22) !important;
}

.group.is-user > div:nth-child(2) button svg,
.group.is-assistant > div:nth-child(2) button svg {
    color: currentColor !important;
    stroke: currentColor !important;
}

.group.is-assistant > div:nth-child(2) > div:first-child:not(:last-child) {
    color: #5a7d5a !important;
    background: rgba(237, 243, 234, 0.72) !important;
    border: 1px solid rgba(134, 166, 122, 0.22) !important;
    border-radius: 6px !important;
}


/* =========================
   四、加载提示
   移除横向滚动动画，改为静态提示
   ========================= */

div.flex.gap-2.w-full.h-full.items-center.justify-center:has(> span.w-\[25\%\].aspect-square.bg-primary.rounded-full) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 210px !important;
    min-width: 210px !important;
    height: 30px !important;
    padding-left: 34px !important;
    overflow: hidden !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f7942' d='M17 8c-3 0-7 2-10 6 3-1 6-1 9 0-2-2-2-4 1-6M2 21s3-3 10-3 10 3 10 3-3-7-10-7S2 21 2 21Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 26px 26px !important;
}

div.flex.gap-2.w-full.h-full.items-center.justify-center:has(> span.w-\[25\%\].aspect-square.bg-primary.rounded-full) > span {
    display: none !important;
}

div.flex.gap-2.w-full.h-full.items-center.justify-center:has(> span.w-\[25\%\].aspect-square.bg-primary.rounded-full)::after {
    content: "阿青与白公公切磋中..." !important;
    display: inline-block !important;
    color: #5a7d5a !important;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
    white-space: nowrap !important;
}


/* =========================
   五、text 代码块
   隐藏 text 字样，但保留复制按钮
   ========================= */

/* 隐藏顶部语言栏中的 text 标签 */
.rili-markdown-renderer pre:has(code.language-text) > div > div.flex.justify-between.h-8.items-center > div:first-child,
.rili-markdown-renderer pre:has(code.language-text) > div > div.flex.justify-between.items-center > div:first-child,
.rili-markdown-renderer pre:has(code.language-text) .text-\[13px\],
.rili-markdown-renderer pre:has(code.language-text) [class*="text-"][class*="\[13px\]"] {
    display: none !important;
}

/* 保持顶部工具栏存在，但不占用过多空间 */
.rili-markdown-renderer pre:has(code.language-text) > div > div.flex.justify-between.h-8.items-center,
.rili-markdown-renderer pre:has(code.language-text) > div > div.flex.justify-between.items-center {
    min-height: 0 !important;
    height: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
}

/* 代码块主体 */
.rili-markdown-renderer pre:has(code.language-text) {
    position: relative !important;
    overflow: hidden !important;
    margin: 12px 0 !important;
    border: 1px solid #cbdccf !important;
    border-radius: 8px !important;
    background: #f5faf7 !important;
    box-shadow: 0 2px 8px rgba(45, 106, 79, 0.06) !important;
}

.rili-markdown-renderer pre:has(code.language-text) code.language-text {
    display: block !important;
    padding: 14px 16px !important;
    color: #1b4332 !important;
    background: transparent !important;
    line-height: 1.75 !important;
    white-space: pre-wrap !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
}

/* 兼容额外代码内容容器 */
.rili-markdown-renderer pre:has(code.language-text) > div > div[node] {
    margin-top: 0 !important;
    padding: 14px 16px !important;
}

/* 保留复制按钮的点击区域 */
.rili-markdown-renderer pre:has(code.language-text) .tooltip-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

.rili-markdown-renderer pre:has(code.language-text) div[data-tooltip-id^="copy-tooltip"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border-radius: 8px !important;
}

.rili-markdown-renderer pre:has(code.language-text) div[data-tooltip-id^="copy-tooltip"] > div {
    display: none !important;
}

/* 只使用颜色反馈，不使用位移、滤镜和闪光动画 */
.rili-markdown-renderer pre:has(code.language-text):hover {
    cursor: pointer !important;
    border-color: #86a67a !important;
    background: #f1f8f3 !important;
    box-shadow: 0 3px 10px rgba(45, 106, 79, 0.1) !important;
}

.rili-markdown-renderer pre:has(code.language-text):active {
    border-color: #4f7942 !important;
    background: #edf6ef !important;
}

[id^="copy-tooltip"] {
    padding: 4px 8px !important;
    color: #fff !important;
    background: #2d6a4f !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}


/* =========================
   六、折叠面板
   移除展开时的下滑动画，避免滚动闪动
   ========================= */

.rili-markdown-renderer details {
    margin: 16px 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #d8e2dc !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(45, 106, 79, 0.08) !important;
}

.rili-markdown-renderer summary {
    position: relative !important;
    margin: 0 !important;
    padding: 14px 48px 14px 20px !important;
    color: #2d6a4f !important;
    background: linear-gradient(90deg, #f0f7f4 0%, #fff 100%) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    list-style: none !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: color .18s ease, background-color .18s ease !important;
}

.rili-markdown-renderer summary::-webkit-details-marker,
.rili-markdown-renderer summary::marker {
    display: none !important;
    content: "" !important;
}

.rili-markdown-renderer summary::after {
    content: "⌄" !important;
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    color: #4f7942 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transform: translateY(-55%) !important;
}

.rili-markdown-renderer details[open] summary::after {
    content: "⌃" !important;
}

.rili-markdown-renderer summary:hover {
    color: #1b4332 !important;
    background: #eaf4ed !important;
}

.rili-markdown-renderer details[open] {
    border-color: #b7d1c2 !important;
    box-shadow: 0 3px 14px rgba(45, 106, 79, 0.1) !important;
}

.rili-markdown-renderer details > *:not(summary) {
    margin: 0 !important;
    padding-right: 20px !important;
    padding-bottom: 16px !important;
    padding-left: 20px !important;
}


/* =========================
   七、折叠面板内 HTML 代码块
   ========================= */

.rili-markdown-renderer details pre:has(code.language-html) {
    margin: 0 !important;
    padding: 14px 16px !important;
    overflow: auto !important;
    background: #f5faf7 !important;
    border: 1px solid #e0ede6 !important;
    border-radius: 8px !important;
}

.rili-markdown-renderer details code.language-html {
    padding: 0 !important;
    color: #1b4332 !important;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}


/* =========================
   八、自定义正文 main-content
   ========================= */

.rili-markdown-renderer .main-content {
    position: relative !important;
    margin: 16px 0 !important;
    padding: 20px 24px !important;
    color: #272727 !important;
    background: linear-gradient(90deg, #f0f7f4 0%, #fff 100%) !important;
    border: 1px solid #d8e2dc !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(45, 106, 79, 0.06) !important;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
    line-height: 1.75 !important;
}

.rili-markdown-renderer .main-content::before {
    content: "" !important;
    display: block !important;
    width: 60px !important;
    height: 3px !important;
    margin-bottom: 16px !important;
    background: linear-gradient(90deg, #2d6a4f, #95d5b2) !important;
    border-radius: 3px !important;
}

.rili-markdown-renderer .main-content p {
    margin: 0 0 14px !important;
    color: #272727 !important;
    font-size: 15px !important;
    letter-spacing: .3px !important;
    text-align: justify !important;
}

.rili-markdown-renderer .main-content p:last-child {
    margin-bottom: 0 !important;
}

.rili-markdown-renderer .main-content strong {
    color: #2d6a4f !important;
    font-weight: 600 !important;
}

.rili-markdown-renderer .main-content em {
    color: #1b4332 !important;
}

.rili-markdown-renderer .main-content a {
    color: #2d6a4f !important;
    border-bottom: 1px solid #d8e2dc !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.rili-markdown-renderer .main-content ul,
.rili-markdown-renderer .main-content ol {
    margin: 12px 0 12px 24px !important;
    padding: 0 !important;
}

.rili-markdown-renderer .main-content li {
    margin: 6px 0 !important;
    color: #272727 !important;
    font-size: 15px !important;
}

.rili-markdown-renderer .main-content li::marker {
    color: #2d6a4f !important;
    font-weight: 600 !important;
}


/* =========================
   九、顶部栏界面美化
   ========================= */

.sticky.w-full.top-0.flex.items-center {
    color: #294936 !important;
    background: linear-gradient(180deg, #f8fcf7 0%, #edf6ef 100%) !important;
    border-bottom: 1px solid #cbdccf !important;
    box-shadow: 0 2px 10px rgba(45, 106, 79, 0.08) !important;
}

#ai-model-selector .group.flex.items-center {
    color: #2d6a4f !important;
    background: rgba(255, 255, 255, .68) !important;
    border: 1px solid #b7d1c2 !important;
    border-radius: 7px !important;
    transition: background-color .18s ease, border-color .18s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
    background: #fff !important;
    border-color: #86a67a !important;
}

#ai-model-selector .truncate.text-\[13px\] {
    color: #2d6a4f !important;
    font-weight: 600 !important;
}

#ai-model-selector .shrink-0.flex.items-center svg {
    color: #4f7942 !important;
    stroke: currentColor !important;
}

.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
    color: #4f7942 !important;
    stroke: currentColor !important;
}

.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
    background: #c98b35 !important;
    border: 2px solid #f7fbf6 !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2),
#header-setting-button {
    color: #4f7942 !important;
    border-radius: 7px !important;
    transition: color .18s ease, background-color .18s ease !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2):hover,
#header-setting-button:hover {
    color: #1b4332 !important;
    background: rgba(134, 166, 122, .18) !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2,
#header-setting-button svg {
    color: currentColor !important;
    stroke: currentColor !important;
}


/* =========================
   十、开场白选择器
   ========================= */

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"],
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]) {
    color: #2d6a4f !important;
    background: #f7fbf6 !important;
    border: 1px solid #c4d8c5 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(45, 106, 79, .05) !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover,
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]):hover {
    background: #edf6ef !important;
    border-color: #86a67a !important;
    box-shadow: 0 3px 9px rgba(45, 106, 79, .1) !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
    color: #4f7942 !important;
    stroke: currentColor !important;
}


/* =========================
   十一、按钮栏
   ========================= */

#ai-mod-button2 {
    color: #3f6948 !important;
}

#ai-mod-button2 button.MuiButton-root {
    color: #3f6948 !important;
    background: #f4f9f1 !important;
    border: 1px solid #c4d8c5 !important;
    border-radius: 7px !important;
    box-shadow: 0 1px 4px rgba(45, 106, 79, .05) !important;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    color: #1b4332 !important;
    background: #eaf4ed !important;
    border-color: #86a67a !important;
}

#ai-mod-button2 button.MuiButton-root svg {
    color: currentColor !important;
    stroke: currentColor !important;
}


/* =========================
   十二、底部输入区
   ========================= */

.bg-gradient-to-t {
    background: linear-gradient(0deg, #f5faf5 0%, rgba(245, 250, 245, .94) 72%, rgba(245, 250, 245, 0) 100%) !important;
}

#ai-chat-bottom-input {
    color: #294936 !important;
}

#ai-chat-input {
    color: #294936 !important;
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid #b7d1c2 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 9px rgba(45, 106, 79, .08) !important;
    caret-color: #2d6a4f !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

#ai-chat-input:focus {
    background: #fff !important;
    border-color: #6f9b70 !important;
    box-shadow: 0 0 0 3px rgba(134, 166, 122, .17) !important;
    outline: none !important;
}

#ai-chat-input::placeholder {
    color: #829985 !important;
    opacity: 1 !important;
}

#ai-chat-input::selection {
    color: #1b4332 !important;
    background: #dcecdf !important;
}


/* =========================
   十三、分页栏
   只做颜色与视觉样式，不改变布局
   ========================= */

.MuiPaginationItem-root {
    color: #4f7942 !important;
    background: #f7fbf6 !important;
    border-color: #c4d8c5 !important;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease !important;
}

.MuiPaginationItem-root:hover {
    color: #1b4332 !important;
    background: #eaf4ed !important;
    border-color: #86a67a !important;
}

.MuiPaginationItem-root.Mui-selected {
    color: #fff !important;
    background: #4f7942 !important;
    border-color: #4f7942 !important;
}

.MuiPaginationItem-root.Mui-disabled {
    color: #aab9ac !important;
    background: #f1f5f1 !important;
    border-color: #dce6dc !important;
}

.MuiPaginationItem-icon {
    color: currentColor !important;
    fill: currentColor !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #56745a !important;
}

.MuiStack-root.css-1uwir8f .MuiInputBase-input {
    color: #294936 !important;
    background: #fff !important;
    border-color: #b7d1c2 !important;
}


/* =========================
   十四、评论区
   ========================= */

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    color: #294936 !important;
    background: #f7fbf6 !important;
    border-top: 1px solid #cbdccf !important;
    box-shadow: 0 -3px 14px rgba(45, 106, 79, .08) !important;
}

div.text-lg.font-bold {
    color: #2d6a4f !important;
}

p.MuiTypography-body1.text-grey-600 {
    color: #678269 !important;
}

span.MuiRating-root {
    color: #c89535 !important;
}

span.MuiRating-iconEmpty svg {
    color: #b9cbb9 !important;
    fill: transparent !important;
    stroke: currentColor !important;
}

span.MuiRating-iconFilled svg {
    color: #c89535 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

span.text-orange-500 {
    color: #b87924 !important;
    font-weight: 600 !important;
}

div.flex.flex-col.border-gray-200 {
    background: #fff !important;
    border-color: #cbdccf !important;
    border-radius: 9px !important;
}

textarea.rc-textarea {
    color: #294936 !important;
    background: #fff !important;
    border-color: #b7d1c2 !important;
    border-radius: 8px !important;
    caret-color: #2d6a4f !important;
    outline: none !important;
}

textarea.rc-textarea:focus {
    border-color: #6f9b70 !important;
    box-shadow: 0 0 0 3px rgba(134, 166, 122, .15) !important;
}

textarea.rc-textarea::placeholder {
    color: #8aa08c !important;
}

div.bg-gray-100.text-gray-500 {
    color: #708771 !important;
    background: #eef5ee !important;
}

div.cursor-pointer.group.flex.items-center.justify-center {
    color: #fff !important;
    background: #4f7942 !important;
    border-radius: 7px !important;
    transition: background-color .18s ease, box-shadow .18s ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background: #356238 !important;
    box-shadow: 0 3px 9px rgba(45, 106, 79, .18) !important;
}

div[data-state="closed"] svg[data-icon="Send03"] {
    color: currentColor !important;
    stroke: currentColor !important;
}

div.style_divider__mW0YX {
    background: #d8e5d8 !important;
}

.MuiStack-root.css-1dmzxoz button.MuiButton-containedPrimary,
.MuiStack-root.css-1dmzxoz button.MuiButton-outlinedPrimary {
    color: #3f6948 !important;
    border-color: #a9c5aa !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.MuiStack-root.css-1dmzxoz button.MuiButton-containedPrimary {
    color: #fff !important;
    background: #4f7942 !important;
    border-color: #4f7942 !important;
}

.MuiStack-root.css-1dmzxoz button.MuiButton-outlinedPrimary {
    background: #f7fbf6 !important;
}

.MuiStack-root.css-1dmzxoz button.MuiButton-outlinedPrimary:hover {
    background: #eaf4ed !important;
    border-color: #86a67a !important;
}

div.p-3.overflow-y-auto {
    color: #294936 !important;
    background: transparent !important;
}

div.group.ml-0 {
    color: #294936 !important;
    border-bottom: 1px solid #e1ebe1 !important;
}

div.group img.rounded-full {
    border: 1px solid #b7d1c2 !important;
    box-shadow: 0 1px 4px rgba(45, 106, 79, .1) !important;
}

div.text-sm.text-grey-600 span.font-bold {
    color: #3f6948 !important;
}

span.text-\[10px\] {
    color: #789279 !important;
}

div.break-all {
    color: #304834 !important;
    line-height: 1.65 !important;
}

div.text-xs.text-grey-600 {
    color: #829985 !important;
}

button.text-gray-400 {
    color: #789279 !important;
    transition: color .18s ease, background-color .18s ease !important;
}

button.text-gray-400:hover {
    color: #4f7942 !important;
    background: #eaf4ed !important;
}

button.text-gray-400 svg {
    color: currentColor !important;
    stroke: currentColor !important;
}

span.cursor-pointer {
    color: #4f7942 !important;
}

span.cursor-pointer:hover {
    color: #1b4332 !important;
    text-decoration: underline !important;
}

div.ml-8.border-l {
    border-left-color: #c4d8c5 !important;
}


/* =========================
   十五、移动端适配
   ========================= */

@media (max-width: 480px) {
    .group.is-user > div:first-child,
    .group.is-assistant > div:first-child {
        max-width: 95vw !important;
        padding: 10px !important;
    }

    .group.is-assistant > div:first-child {
        width: 100% !important;
    }

    div.flex.gap-2.w-full.h-full.items-center.justify-center:has(> span.w-\[25\%\].aspect-square.bg-primary.rounded-full) {
        width: 175px !important;
        min-width: 175px !important;
        padding-left: 30px !important;
        background-size: 23px 23px !important;
    }

    div.flex.gap-2.w-full.h-full.items-center.justify-center:has(> span.w-\[25\%\].aspect-square.bg-primary.rounded-full)::after {
        font-size: 13px !important;
    }

    .rili-markdown-renderer .main-content {
        padding: 16px 18px !important;
    }

    .rili-markdown-renderer summary {
        padding: 12px 42px 12px 16px !important;
        font-size: 15px !important;
    }

    .rili-markdown-renderer summary::after {
        right: 16px !important;
    }

    .rili-markdown-renderer details > *:not(summary) {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .rili-markdown-renderer pre:has(code.language-text) code.language-text {
        padding: 12px !important;
        font-size: 13px !important;
    }
}