html, body {
height: 100%;
overflow: hidden;
background: #0b0f14;
color: #e5e7eb;
}
/* Seraphina: 聊天前端整体按比例放大（默认约 1.3 倍）
* 说明：
* - 通过提升根元素的字体大小，放大所有基于 rem 的字体、间距、容器宽度
* - 不使用 transform: scale，避免光标位置/点击区域错位
* - 仅在 chat.js 检测到 #scriptirc-chat 时，为 添加 sir-chat-scale-lg 类生效
* - 如需调整比例，只需修改下方 --sir-chat-scale 的数值，例如 1.2 / 1.4
*/
:root {
--sir-chat-scale: 1.2; /* 全局缩放比例常量：你可以手动调整这个值 */
}
html.sir-chat-scale-lg {
font-size: calc(16px * var(--sir-chat-scale)); /* 默认 16px * 1.3 ≈ 20.8px */
}
#scriptirc-chat {
min-height: 100vh;
}
.site-header, .site-footer {
display: none;
}
::selection {
background: #34d399;
color: #0b0f14;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #1f2937;
border-radius: 6px;
border: 2px solid #0b0f14;
}
::-webkit-scrollbar-track {
background: #0b0f14;
}
textarea#chat-input {
overflow: hidden;
}
/* Seraphina: 侧边栏标签内容（聊天 / 文件 / 信息）独立滚动
* - 使用固定的视口高度上限，避免被整页高度影响
* - 不再完全隐藏滚动条，防止用户误以为不能滚动
*/
#session-scroll,
#sir-files-scroll,
#sir-info-scroll {
max-height: calc(100vh - 180px); /* 大致扣除顶部品牌区 + 标签栏 + 底部头像区域 */
overflow-y: auto;
}
/* 文件面板内部由文件树接管滚动，保证底部操作区可贴底 */
#sir-files-scroll{
min-height: 0;
height: calc(100vh - 180px);
overflow-y: hidden;
}
#sir-files-scroll:not(.hidden){
display: flex;
flex-direction: column;
}
#sir-files-scroll.hidden{
display: none;
}
#sir-files-scroll > div{
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
#sir-file-tree{
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
/* Sidebar list item collapse effect for delete (scoped to sidebar list only) */
#chat-session-list .sir-collapsing {
overflow: hidden;
transition: height .24s ease, opacity .2s ease, margin .24s ease, padding .24s ease;
}
#chat-session-list .sir-collapsed {
height: 0 !important;
opacity: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Assistant generating bar（“正在生成”）：
* Seraphina:
* - 使用“track + beam + text”的版本（参考用户示例）
* - 严格遵循 180x24：容器 180×24，轨道 4px 高
* - 使用 mask 处理边缘消融，beam 使用 drop-shadow 增加流光
*/
.sir-genbar {
display: inline-flex;
align-items: center;
}
.sir-genbar .sir-wide-loader-minimal {
width: 180px;
height: 24px;
display: flex;
align-items: center;
gap: 12px;
}
.sir-genbar .sir-wide-loader-track {
position: relative;
flex: 1;
height: 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.sir-genbar .sir-wide-loader-beam {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 渐变设计：让 0% 和 100% 的状态完全一致，实现无缝衔接 */
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0) 35%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 65%,
transparent 100%
);
background-size: 200% 100%;
animation: sir-wide-loader-move-beam 1.5s linear infinite;
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}
.sir-genbar .sir-wide-loader-text {
color: #ffffff;
font-size: 11px;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
letter-spacing: 1px;
white-space: nowrap;
transform-origin: left center;
/* 文字呼吸 */
animation: sir-wide-loader-text-breathe 3.5s ease-in-out infinite;
}
@keyframes sir-wide-loader-move-beam {
0% { background-position: 200% 0; }
100% { background-position: 0% 0; }
}
@keyframes sir-wide-loader-text-breathe {
0%, 100% { opacity: 0.3; transform: scale(0.98); }
50% { opacity: 0.8; transform: scale(1); }
}
/* Seraphina: 编译器快捷指令标签“呼吸”动效（仅渐明渐暗，避免过于抢眼） */
[data-compiler-shortcut="1"] {
animation: sir-compiler-breath 1.8s ease-in-out infinite;
}
@keyframes sir-compiler-breath {
0% {
opacity: 0.6;
}
50% {
opacity: 1;
}
100% {
opacity: 0.6;
}
}
/* 降低动态偏好：减少动画，避免视觉疲劳 */
@media (prefers-reduced-motion: reduce) {
.sir-genbar .sir-wide-loader-beam,
.sir-genbar .sir-wide-loader-text {
animation: none !important;
}
.sir-genbar .sir-wide-loader-text { opacity: 0.8; transform: none; }
}
/* Modal base (duplicate safe; JS also injects minimal styles as fallback) */
.sir-overlay{opacity:0;transition:opacity .2s ease}
.sir-overlay.sir-open{opacity:1}
.sir-modal{opacity:0;transform:translateY(8px) scale(.98);transition:opacity .25s cubic-bezier(0.22,1,0.36,1),transform .25s cubic-bezier(0.22,1,0.36,1)}
.sir-modal.sir-open{opacity:1;transform:translateY(0) scale(1)}
/* ------------------------------
* Seraphina: 侧边栏文件夹标签（聊天/文件）
* 目标：
* - 外观像“文档夹”的标签页
* - 文件标签在无会话选中时禁用
* - 切换时显示不同内容面板（聊天列表 / 文件目录）
* ------------------------------ */
#sir-aside-tabs .sir-aside-tabbar {
display: flex;
gap: 3px;
padding-bottom: 10px;
width: 100%; /* Seraphina: 让标签栏本身占满上层容器宽度 */
}
#sir-aside-tabs .sir-aside-tab{
position:relative;
display:inline-flex;
align-items:center;
gap:6px;
height:32px;
padding:0 12px;
/* Seraphina: 让每个标签自动等分整行宽度，填充上层容器 */
flex:1 1 0;
min-width:0;
justify-content:center;
text-align:center;
border-radius:10px 10px 8px 8px;
border:1px solid rgba(63,63,70,.6);
background:rgba(39,39,42,.35);
color:rgba(228,228,231,.92);
font-size:12px;
line-height:1;
user-select:none;
transition:background .15s ease,border-color .15s ease,transform .1s ease,opacity .15s ease;
}
/* Seraphina: 按需求移除“文件夹凸起”伪元素（保持标签为纯矩形圆角） */
#sir-aside-tabs .sir-aside-tab:hover{
background:rgba(63,63,70,.35);
border-color:rgba(82,82,91,.8);
}
#sir-aside-tabs .sir-aside-tab:active{
transform:translateY(1px);
}
#sir-aside-tabs .sir-aside-tab.is-active{
background:rgba(24,24,27,.75);
border-color:rgba(16,185,129,.35);
box-shadow:0 6px 18px rgba(0,0,0,.25);
}
#sir-aside-tabs .sir-aside-tab.is-disabled{
opacity:.45;
cursor:not-allowed;
}
#sir-aside-tabs .sir-aside-tab-icon svg{
display:block;
width:16px;
height:16px;
}
/* 文件树：已改为纯 Tailwind class 渲染（见 chat.js），此处不再维护 sir-file-tree 样式 */
/* 信息面板 */
.sir-info-tabs{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:10px;
}
.sir-info-tab{
font-size:11px;
color:rgba(161,161,170,.95);
padding:6px 10px;
border-radius:9999px;
border:1px solid rgba(63,63,70,.45);
background:rgba(24,24,27,.28);
cursor:pointer;
transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.sir-info-tab:hover{
color:rgba(228,228,231,.92);
border-color:rgba(82,82,91,.8);
}
.sir-info-tab-active{
color:rgba(228,228,231,.92);
border-color:rgba(16,185,129,.8);
background:rgba(16,185,129,.12);
}
.sir-info-panel{
width:100%;
}
.sir-info-card{
border:1px solid rgba(63,63,70,.45);
background:rgba(24,24,27,.28);
border-radius:12px;
padding:10px 10px;
}
.sir-info-title{
font-size:12px;
color:rgba(228,228,231,.92);
margin-bottom:8px;
}
.sir-info-body{
font-size:12px;
color:rgba(161,161,170,.95);
}
.sir-info-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
padding:4px 0;
}
.sir-info-k{
color:rgba(113,113,122,.95);
flex:0 0 auto;
}
.sir-info-v{
color:rgba(212,212,216,.95);
text-align:right;
min-width:0;
word-break:break-word;
}
.sir-info-v code{
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size:11px;
color:rgba(212,212,216,.95);
}
/* Settings UI styles - Author: Seraphina */
.sir-settings .sir-radio{position:absolute;opacity:0;pointer-events:none}
.sir-settings .sir-radio-card{display:block}
.sir-settings .sir-radio-card-body{position:relative;border:1px solid #3f3f46;border-radius:10px;padding:10px 12px 10px 34px;background:rgba(24,24,27,.4);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.sir-settings .sir-radio-card:hover .sir-radio-card-body{border-color:#52525b;background:rgba(39,39,42,.4)}
.sir-settings .sir-radio:focus + .sir-radio-card-body{box-shadow:0 0 0 2px rgba(16,185,129,.35);border-color:#10b981}
.sir-settings .sir-radio:checked + .sir-radio-card-body{border-color:#10b981;background:rgba(16,185,129,.08)}
.sir-settings .sir-radio-card-body::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;border:2px solid #71717a;background:transparent;transition:border-color .2s ease,background-color .2s ease}
.sir-settings .sir-radio:checked + .sir-radio-card-body::before{border-color:#10b981;background:#10b981}
.sir-settings .sir-radio-title{font-weight:600}
.sir-settings .sir-range{display:flex;align-items:center;gap:10px}
.sir-settings .sir-range-input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:9999px;background:#3f3f46;outline:none}
.sir-settings .sir-range-input::-webkit-slider-runnable-track{height:6px;border-radius:9999px;background:#3f3f46}
.sir-settings .sir-range-input::-moz-range-track{height:6px;border-radius:9999px;background:#3f3f46}
.sir-settings .sir-range-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#10b981;border:2px solid #064e3b;box-shadow:0 0 0 3px rgba(16,185,129,.25);cursor:pointer;margin-top:-5px}
.sir-settings .sir-range-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#10b981;border:2px solid #064e3b;box-shadow:0 0 0 3px rgba(16,185,129,.25);cursor:pointer}
.sir-settings .sir-range-value{flex:0 0 auto;min-width:42px;text-align:center;font-size:12px;color:#e5e7eb;background:rgba(24,24,27,.6);border:1px solid #3f3f46;border-radius:9999px;padding:4px 8px}
.sir-modal::-webkit-scrollbar{width:10px;height:10px}
.sir-modal::-webkit-scrollbar-thumb{background:#4b4949;border-radius:6px;border:2px solid #2f2d2d}
.sir-modal::-webkit-scrollbar-track{background:#2a2929}
/* --------------------------------
* Seraphina: 竖屏布局 & 侧边栏抽屉交互
* 目标：
* - 实时监听窗口宽高比，竖屏（高度 > 宽度）时启用“左侧抽屉”侧边栏
* - 抽屉展开时占据屏幕左侧一半宽度；折叠时完全隐藏在左侧
* - 抽屉展开/拖动过程中，右侧 chat-section 逐渐变暗并高斯模糊
* - 所有动画通过 CSS 变量 --sir-sidebar-progress (0~1) 控制，JS 只负责更新该进度
* -------------------------------- */
#scriptirc-chat.sir-layout-portrait {
--sir-sidebar-progress: 0;
}
#scriptirc-chat.sir-layout-portrait > .flex {
position: relative;
}
/* 竖屏下：侧边栏作为左侧抽屉，使用 transform + 变量控制开合进度 */
#scriptirc-chat.sir-layout-portrait aside {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 50vw; /* 展开后占据屏幕一半宽度 */
max-width: 420px; /* 上限控制，避免超宽设备侧边过大 */
z-index: 60;
transform: translateX(calc((var(--sir-sidebar-progress, 0) - 1) * 100%));
transition: transform .25s cubic-bezier(0.22,1,0.36,1), box-shadow .25s cubic-bezier(0.22,1,0.36,1);
box-shadow: 0 0 40px rgba(0,0,0,.6);
}
/* 竖屏下：聊天区域在抽屉展开时逐渐变暗 + 模糊，进度由变量控制 */
#scriptirc-chat.sir-layout-portrait #chat-section {
position: relative;
z-index: 10;
transition: filter .25s cubic-bezier(0.22,1,0.36,1), background-color .25s cubic-bezier(0.22,1,0.36,1);
filter: blur(calc(4px * var(--sir-sidebar-progress, 0)));
background-color: rgba(0,0,0, calc(.4 * var(--sir-sidebar-progress, 0)));
}
/* 拖动过程中禁用过渡动画，让拖拽跟手 */
#scriptirc-chat.sir-layout-portrait.sir-sidebar-dragging aside,
#scriptirc-chat.sir-layout-portrait.sir-sidebar-dragging #chat-section {
transition: none !important;
}
/* --------------------------------
* Seraphina: 模型按钮文字溢出时使用省略号而不是换行，避免把右侧“发送”按钮挤出容器
* 目标：
* - 保持按钮整体为单行布局
* - 左侧“模型 + 版本”区域在空间不足时优先压缩文字，而不是撑爆整行
* -------------------------------- */
/* 让 composer 下半部分的左侧区域可以被压缩 */
#composer .border-dashed > .flex:first-child {
min-width: 0;
}
/* 模型按钮本身：允许被压缩，限制最大宽度，防止挤占过多水平空间 */
#model-trigger {
max-width: 8rem; /* 上限收紧，避免在窄屏占用过大宽度 */
min-width: 0;
flex-shrink: 1;
}
/* 模型名文字：单行省略号 */
#model-trigger #model-current {
display: block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* --------------------------------
* Seraphina: 思考模式卡片（Thinking Card）
* - 独立折叠卡片：details[data-sir-reasoning="1"]
* - 折叠态 summary 内“电视屏”：总显示最新输出（思考文字片段 / 最新工具调用）
* -------------------------------- */
details[data-sir-reasoning="1"] {
background: rgb(24 24 27 / 48%);
border: 1px solid rgba(39, 39, 42, .9);
border-radius: 16px;
margin: 10px 0px 6px 0px;
overflow: hidden;
backdrop-filter: blur(2px);
}
details[data-sir-reasoning="1"] > summary {
list-style: none;
padding: 0;
}
details[data-sir-reasoning="1"] > summary::-webkit-details-marker {
display: none;
}
details[data-sir-reasoning="1"][open] [data-sir-think-arrow="1"]{
transform: rotate(180deg);
}
/* 箭头尺寸固定，避免受全局字体缩放影响导致“变形/变大” */
details[data-sir-reasoning="1"] [data-sir-think-arrow="1"]{
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 16px;
width: 16px;
height: 16px;
}
details[data-sir-reasoning="1"] [data-sir-think-header="1"]{
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
cursor: pointer;
user-select: none;
transition: background-color .2s ease;
}
details[data-sir-reasoning="1"] [data-sir-think-header="1"]:hover{
background: rgba(29, 29, 33, .85);
}
details[data-sir-reasoning="1"] [data-sir-think-dot="1"]{
width: 8px;
height: 8px;
border-radius: 999px;
background: rgb(59, 130, 246);
box-shadow: 0 0 10px rgba(59,130,246,.45);
}
details[data-sir-reasoning="1"][data-sir-think-status="tool"] [data-sir-think-dot="1"]{
background: rgb(245, 158, 11);
box-shadow: 0 0 10px rgba(245,158,11,.35);
}
details[data-sir-reasoning="1"][data-sir-think-status="done"] [data-sir-think-dot="1"]{
background: rgb(16, 185, 129);
box-shadow: 0 0 10px rgba(16,185,129,.25);
}
details[data-sir-reasoning="1"][data-sir-think-status="thinking"] [data-sir-think-dot="1"],
details[data-sir-reasoning="1"][data-sir-think-status="tool"] [data-sir-think-dot="1"]{
animation: sir-think-pulse 1.2s ease-in-out infinite;
}
@keyframes sir-think-pulse{
0%,100%{ transform: scale(1); opacity: 1; }
50%{ transform: scale(.75); opacity: .55; }
}
/* 状态滚动（3行 * 24px） */
details[data-sir-reasoning="1"] [data-sir-think-status-viewport="1"]{
height: 24px;
overflow: hidden;
}
details[data-sir-reasoning="1"] [data-sir-think-statuslist="1"]{
display: flex;
flex-direction: column;
transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
details[data-sir-reasoning="1"] [data-sir-think-status-item="1"]{
height: 24px;
line-height: 24px;
font-size: 14px;
font-weight: 600;
}
details[data-sir-reasoning="1"] [data-sir-think-status-item="1"][data-k="thinking"]{ color: rgb(96, 165, 250); }
details[data-sir-reasoning="1"] [data-sir-think-status-item="1"][data-k="tool"]{ color: rgb(245, 158, 11); }
details[data-sir-reasoning="1"] [data-sir-think-status-item="1"][data-k="done"]{ color: rgb(16, 185, 129); }
/* 预览区（电视屏） */
details[data-sir-reasoning="1"] [data-sir-think-preview-viewport="1"]{
height: 24px;
overflow: hidden;
position: relative;
width: 100%;
}
details[data-sir-reasoning="1"] [data-sir-think-preview-item="1"]{
position: absolute;
right: 0;
width: 100%;
height: 24px;
display: flex;
align-items: center;
justify-content: flex-end;
transition: all .7s cubic-bezier(0.23, 1, 0.32, 1);
}
details[data-sir-reasoning="1"] [data-sir-think-preview-item="1"].sir-enter{ transform: translateY(24px); opacity: 0; }
details[data-sir-reasoning="1"] [data-sir-think-preview-item="1"].sir-active{ transform: translateY(0); opacity: 1; }
details[data-sir-reasoning="1"] [data-sir-think-preview-item="1"].sir-exit{ transform: translateY(-24px); opacity: 0; }
details[data-sir-reasoning="1"] .sir-think-logic{
font-size: 12px;
color: rgb(113, 113, 122);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
max-width: 280px;
}
details[data-sir-reasoning="1"] .sir-think-tag{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 1px 8px; /* 降低高度避免在 24px 视口内裁切边框 */
border-radius: 8px;
font-size: 10px;
font-weight: 700;
border: 1px solid rgba(245, 158, 11, .25);
background: rgba(245, 158, 11, .08);
color: rgb(245, 158, 11);
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
details[data-sir-reasoning="1"] .sir-think-tag{
line-height: 18px;
height: 18px;
}
details[data-sir-reasoning="1"] .sir-think-tag[data-state="done"]{
border-color: rgba(16, 185, 129, .25);
background: rgba(16, 185, 129, .08);
color: rgb(16, 185, 129);
}
details[data-sir-reasoning="1"] .sir-think-tag[data-state="error"]{
border-color: rgba(248, 113, 113, .28);
background: rgba(248, 113, 113, .08);
color: rgb(248, 113, 113);
}
/* 展开区域 */
details[data-sir-reasoning="1"] [data-sir-think-bodywrap="1"]{
border-top: 1px solid rgba(39, 39, 42, .55);
padding: 16px 18px;
/* 展开/折叠动画（参考 expand-grid 的“收起到 0”体验） */
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .5s cubic-bezier(0.4, 0, 0.2, 1), opacity .4s ease;
}
details[data-sir-reasoning="1"][open] [data-sir-think-bodywrap="1"]{
max-height: 420px; /* 足够容纳工具列表 + 思考文本 */
overflow-y: auto; /* 展开时允许纵向滚动 */
opacity: 1;
margin: 0 0 11px 0;
}
/* 展开态纵向滚动：隐藏滚动条（但可滚动） */
details[data-sir-reasoning="1"][open] [data-sir-think-bodywrap="1"]{
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge Legacy */
}
details[data-sir-reasoning="1"][open] [data-sir-think-bodywrap="1"]::-webkit-scrollbar{
width: 0;
height: 0;
}
details[data-sir-reasoning="1"] [data-sir-reasoning-tools="1"]{
display: flex;
flex-direction: column;
gap: 10px;
}
details[data-sir-reasoning="1"] [data-sir-reasoning-body="1"]{
margin-top: 10px;
white-space: pre-wrap;
word-break: break-word;
font-size: 13px;
line-height: 1.7;
color: rgb(161, 161, 170);
max-height: 350px;
}
/* 思考文本逐字渐入 */
details[data-sir-reasoning="1"] .sir-think-char{
display: inline-block;
opacity: 0;
transform: translateY(2px);
animation: sir-think-char-in .3s ease forwards;
}
@keyframes sir-think-char-in{
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
/* --------------------------------
* Seraphina: 底部“当前上下文用量”矩阵提示
* - 文本显示已占用百分比，悬浮时弹出矩阵统计卡片
* -------------------------------- */
.sir-ctx-trigger{
position: relative;
display: inline-block;
cursor: pointer;
}
.sir-ctx-label{
font-size: 11px;
color: rgba(255,255,255,0.45);
}
.sir-ctx-label span{
margin-left: 4px;
font-weight: 600;
color: #ffffff;
}
.sir-ctx-matrix {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(8px);
background: rgb(16 19 22 / 80%);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(16px);
padding: 16px 18px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
transition: all 0.25s ease;
min-width: 220px;
z-index: 40;
}
.sir-ctx-trigger:hover .sir-ctx-matrix{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.sir-ctx-matrix::after{
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: rgba(20,22,25,0.98) transparent transparent transparent;
}
.sir-ctx-matrix-header{
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.sir-ctx-matrix-col{
flex: 1;
text-align: center;
}
.sir-ctx-matrix-num{
display: block;
font-size: 15px;
font-weight: 600;
color: #ffffff;
}
.sir-ctx-matrix-name{
display: block;
margin-top: 4px;
font-size: 10px;
color: rgba(255,255,255,0.4);
}
.sir-ctx-grid {
display: grid;
grid-template-columns: repeat(12, 1fr); /* 固定 12 列，自动平均分配 */
gap: 1px;
width: 192px; /* 固定总宽度，保证每行格子等宽 */
margin: 0 auto;
}
.sir-ctx-cell{
aspect-ratio: 1 / 1; /* 强制每个格子为正方形 */
width: 100%;
border-radius: 2px;
background: rgba(255,255,255,0.06);
}
.sir-ctx-cell--cache{
background: #10b981;
}
.sir-ctx-cell--input{
background: #3b82f6;
}
.sir-ctx-cell--output{
background: #a855f7;
}
/* 扁平文件树滚动条（参考示例）：Tailwind 本身无法覆盖 WebKit scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 3px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #3a3a42; border-radius: 10px; }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #3a3a42 transparent; }
/* 文件内容弹窗：弹性动画（参考用户提供的 Tailwind 弹窗示例） */
.spring-animation { transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal-enter { opacity: 0; transform: scale(0.9) translateY(10px); pointer-events: none; }
.overlay-transition { transition: opacity 0.2s ease-out; }
/* 弹窗内容滚动条（与文件树滚动条区分，避免互相影响） */
.sir-modal-scrollbar::-webkit-scrollbar { width: 5px; }
.sir-modal-scrollbar::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 2px; }
.sir-modal-scrollbar { scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }
/* 弹窗代码高亮（深色，贴近 VSCode Dark+，仅作用于弹窗内容区） */
.sir-modal-scrollbar pre { margin: 0; }
.sir-modal-scrollbar .hljs { background: transparent; color: #d4d4d4; padding: 0; }
.sir-modal-scrollbar .hljs-comment,
.sir-modal-scrollbar .hljs-quote { color: #6a9955; font-style: italic; }
.sir-modal-scrollbar .hljs-keyword,
.sir-modal-scrollbar .hljs-selector-tag,
.sir-modal-scrollbar .hljs-literal,
.sir-modal-scrollbar .hljs-name { color: #c586c0; }
.sir-modal-scrollbar .hljs-string,
.sir-modal-scrollbar .hljs-regexp,
.sir-modal-scrollbar .hljs-addition,
.sir-modal-scrollbar .hljs-attribute,
.sir-modal-scrollbar .hljs-meta .hljs-string { color: #ce9178; }
.sir-modal-scrollbar .hljs-built_in,
.sir-modal-scrollbar .hljs-type { color: #4ec9b0; }
.sir-modal-scrollbar .hljs-number,
.sir-modal-scrollbar .hljs-symbol,
.sir-modal-scrollbar .hljs-bullet { color: #b5cea8; }
.sir-modal-scrollbar .hljs-title,
.sir-modal-scrollbar .hljs-section { color: #4fc1ff; }
.sir-modal-scrollbar .hljs-variable,
.sir-modal-scrollbar .hljs-template-variable,
.sir-modal-scrollbar .hljs-class .hljs-title { color: #9cdcfe; }
.sir-modal-scrollbar .hljs-function .hljs-title { color: #dcdcaa; }
.sir-modal-scrollbar .hljs-meta { color: #9cdcfe; }
.sir-modal-scrollbar .hljs-emphasis { font-style: italic; }
.sir-modal-scrollbar .hljs-strong { font-weight: bold; }