/* 输入框区域“其他”按钮（模组/评论/图片/搜索/设置/模型切换等） */
/* 现代家庭温馨风格按键 - 暖杏色系，柔和圆润，亲和舒适 */
#prompt-input button:not([type="submit"]) {
  background: linear-gradient(145deg, #fff3e6 0%, #ffe0c0 100%) !important; /* 柔白杏至暖奶茶渐变 */
  color: #7a5a4e !important; /* 温暖可可色，柔和清晰 */
  border: none !important; /* 去除传统硬边框，使用阴影勾勒体积 */
  border-radius: 40px !important; /* 超大圆角，亲和圆润 */
  font-family: 'Segoe UI', 'Roboto', 'Noto Sans CJK SC', 'Helvetica Neue', system-ui, -apple-system, sans-serif !important;
  font-weight: 500 !important; /* 中等字重，不笨重 */
  font-style: normal !important;
  text-transform: none !important; /* 取消大写，更随意自然 */
  letter-spacing: 0.5px !important; /* 轻微字间距，舒适易读 */
  text-shadow: 0 1px 0 rgba(255, 255, 245, 0.8) !important; /* 柔和顶部高光 */
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.05),            /* 极浅外部阴影 */
    0 2px 2px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 245, 0.9),   /* 内部顶部柔光 */
    inset 0 -1px 0 rgba(150, 100, 70, 0.1) !important; /* 底部轻微内阴影 */
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
  position: relative;
  text-align: center;
  cursor: pointer;
  backdrop-filter: none;
}

/* 简洁温馨 */
#prompt-input button:not([type="submit"])::before,
#prompt-input button:not([type="submit"])::after {
  display: none !important;
}

/* 悬停：柔和的抬升与高亮，像被轻轻抚摸 */
#prompt-input button:not([type="submit"]):hover {
  background: linear-gradient(145deg, #fff9f0 0%, #ffebd0 100%) !important;
  color: #5e3e32 !important; /* 略深暖棕，增加层次 */
  transform: translateY(-2px) !important;
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 4px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 245, 1) !important;
  text-shadow: 0 1px 0 #fffef5 !important;
  letter-spacing: 0.6px !important; /* 轻微舒展 */
}

/* 按下：温柔的触底感，不突兀 */
#prompt-input button:not([type="submit"]):active {
  transform: translateY(2px) !important;
  background: linear-gradient(145deg, #f7e2cc 0%, #f0d0b0 100%) !important;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 3px rgba(100, 60, 30, 0.08) !important;
  color: #6b4a3c !important;
  transition: all 0.05s ease !important;
  text-shadow: none !important;
}

/* 焦点状态：温暖的光晕，而非生硬描边 */
#prompt-input button:not([type="submit"]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 190, 120, 0.5), 0 4px 8px rgba(0, 0, 0, 0.05) !important;
  background: #fff5ea !important;
}

/* 可选：为按键容器增加家庭温馨的整体氛围（如背景暖光，但由您自行应用） */

/*
 * 发送按钮 · 雾霾蓝温柔风
 * 适配选择器 button.bg-primary.size-7
 */

#prompt-input [type="submit"],#prompt-input button[aria-label="停止"] {
  background: linear-gradient(145deg, #e6ecf3 0%, #cedae6 100%) !important;
  color: #3d5062 !important;
  border: none !important;
  border-radius: 40px !important;
  font-family: 'Segoe UI', 'Roboto', 'Noto Sans CJK SC', 'Helvetica Neue', system-ui, -apple-system, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.05),
    0 2px 2px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(60, 80, 100, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
  position: relative;
  text-align: center;
  cursor: pointer;
  backdrop-filter: none;
}

#prompt-input [type="submit"]::before,
#prompt-input [type="submit"]::after,#prompt-input button[aria-label="停止"]::before,#prompt-input button[aria-label="停止"]::after {
  display: none !important;
}

#prompt-input [type="submit"]:hover,#prompt-input button[aria-label="停止"]:hover {
  background: linear-gradient(145deg, #f0f4f8 0%, #dce4ee 100%) !important;
  color: #2d4052 !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 4px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.6px !important;
}

#prompt-input [type="submit"]:active,#prompt-input button[aria-label="停止"]:active {
  transform: translateY(2px) !important;
  background: linear-gradient(145deg, #c8d2e0 0%, #b8c4d4 100%) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 3px rgba(40, 60, 80, 0.10) !important;
  color: #2d4052 !important;
  transition: all 0.05s ease !important;
  text-shadow: none !important;
}

#prompt-input [type="submit"]:focus-visible,#prompt-input button[aria-label="停止"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(160, 190, 220, 0.50),
    0 4px 8px rgba(0, 0, 0, 0.05) !important;
  background: #eef2f6 !important;
}

/* 输入框 class="contents" —— 有边框、无背景，暖杏色系 */
.contents {
    /* 尺寸与排版 */
    display: block;
    width: 100%;
    padding: 16px 24px;
    font-family: 'Segoe UI', 'Roboto', 'Noto Sans CJK SC', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 450;
    color: #5e3e32;
    letter-spacing: 0.4px;
    line-height: 1.5;

    /* 有边框 —— 温暖细腻的描边 */
    border: 1.5px solid rgba(190, 150, 130, 0.35);
    border-radius: 10px;

    /* 无背景 —— 完全透明 */
    background: transparent !important;

    /* 极浅外影勾勒体积 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);

    /* 过渡动画 */
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);

    /* 字体平滑 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 占位符样式 */
.contents::placeholder {
    color: #b3978a;
    font-weight: 400;
    letter-spacing: 0.3px;
    opacity: 0.7;
}

/* 悬停状态 */
.contents:hover {
    border-color: rgba(180, 140, 120, 0.55);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.02);
}

/* 焦点状态（无生硬 outline，代以暖光晕） */
.contents:focus {
    outline: none;
    border-color: rgba(200, 150, 120, 0.7);
    box-shadow: 0 0 0 4px rgba(255, 190, 140, 0.25), 0 4px 12px rgba(160, 110, 80, 0.06);
    background: transparent !important; /* 保持无背景 */
}

/* 禁用状态 */
.contents:disabled {
    opacity: 0.5;
    border-color: rgba(190, 160, 145, 0.25);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* ====用户与AI对话卡片样式==== */
/* 1. 用户侧-浅色模式下的样式（默认） */
.is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background: #E8F5E9;  /* 浅护眼绿色（豆沙绿） */
    border: none;
    border-radius: 4px;
}
/* 2. AI侧使用不同的背景色 */
.is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background: #F7F5F0;  /* 浅米黄色 */
}
/* 3. 深色模式下的样式覆盖 */
@media (prefers-color-scheme: dark) {
    .is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
        background: #2E3B30;  /* 深色模式下的深灰绿 */
    }
    .is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
        background: #2D2B28;  /* 深色模式下的深暖灰 */
    }
}

/* 1. 基础容器与内容区域样式 */
details {
width: 100%; /* 可根据实际需求调整宽度 */
margin: 10px 0;
}
/* 2. summary 标题栏基础样式 */
summary {
list-style: none; /* 移除默认的展开/折叠小三角 */
padding: 4px 8px;
cursor: pointer;
font-weight: bold;
color: #333;
position: relative;
user-select: none; /* 防止文本被选中 */
/* 核心需求：默认（未展开）状态下仅显示下边框 */
border-bottom: 2px solid #ccc; 
}
/* 兼容 WebKit 内核浏览器（如 Chrome/Safari），彻底隐藏原生箭头 */
summary::-webkit-details-marker {
display: none;
}
/* 3. 自定义展开/收起图标 (使用伪元素绘制加号/减号) */
summary::before {
content: '+'; /* 默认显示加号 */
margin-right: 10px;
font-size: 1.2em;
color: #007bff;
display: inline-block;
transition: transform 0.2s ease;
}
/* 4. 展开状态下的样式覆盖 */
details[open] > summary {
/* 展开时，将下边框改为上边框，或者保持下边框但改变颜色以作区分 */
border-bottom: 2px solid #007bff; 
}
details[open] > summary::before {
content: '-'; /* 展开时显示减号 */
}
/* 5. details 内部包裹内容的样式美化 */
details > div, 
details > p {
padding: 2px;
margin-top: 0;
line-height: 1.6;
color: #555;
background-color: #f9f9f9;
border-bottom: 2px solid #ccc; /* 内容区底部也保留下边框，保持整体视觉一致 */
}

/* ====================
公共基础样式
==================== */
.user1, .user2, .user3,
.npc1, .npc2, .npc3, .npc4 {
border-bottom: 2px solid; 
margin: 2px 0;
padding: 2px 0;           
border-radius: 2px;
word-wrap: break-word;
white-space: pre-line;
}
/* ====================
浅色模式（默认颜色）
==================== */
/* --- 用户样式 (统一极深黑蓝色字体) --- */
.user1 { border-color: #1565C0; color: #000814; }
.user2 { border-color: #1E88E5; color: #000814; }
.user3 { border-color: #42A5F5; color: #000814; }
/* --- NPC 样式 (统一极深黑紫色字体) --- */
.npc1 { border-color: #880E4F; color: #1A0014; }
.npc2 { border-color: #C62828; color: #1A0014; }
.npc3 { border-color: #D84315; color: #1A0014; }
.npc4 { border-color: #BF360C; color: #1A0014; }
/* ============================
深色模式适配
============================ */
@media (prefers-color-scheme: dark) {
/* 用户深色模式 (字体微调为极浅蓝白，保证可读性) */
.user1 { border-color: #64B5F6; color: #E3F2FD; }
.user2 { border-color: #42A5F5; color: #E3F2FD; }
.user3 { border-color: #2196F3; color: #E3F2FD; }
/* NPC 深色模式 (字体微调为极浅紫白，保证可读性) */
.npc1 { border-color: #F06292; color: #FCE4EC; }
.npc2 { border-color: #EF5350; color: #FCE4EC; }
.npc3 { border-color: #FF7043; color: #FCE4EC; }
.npc4 { border-color: #FF5722; color: #FCE4EC; }
}

/* ======对话行容器====== */
.npc-talk,
.my-talk {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
    max-width: 100%;
}

.npc-talk {
    flex-direction: row;
}

.my-talk {
    flex-direction: row-reverse;
}

/* ======姓名框 · 黏土效果====== */
.npc-name,
.my-name {
    flex-shrink: 0;
    padding: 6px 18px;
    font-weight: 700;
    font-size: 1.15em;
    letter-spacing: 0.3px;
    line-height: 1.4;
    margin-top: 1px;
    max-width: 80px; 
    word-break: break-all;"
    border: none;
    border-radius: 14px;
    color: #ffffff;

    /* 黏土多层阴影 */
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.08),
        inset 0 -3px 6px rgba(0, 0, 0, 0.06),
        inset 0 2px 8px rgba(255, 255, 255, 0.25);

    transform: translateY(-2px);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
    user-select: none;
}

.npc-name:hover,
.my-name:hover {
    transform: translateY(-4px);
    box-shadow:
        0 6px 0 rgba(0, 0, 0, 0.12),
        0 10px 20px rgba(0, 0, 0, 0.06),
        inset 0 -3px 6px rgba(0, 0, 0, 0.04),
        inset 0 2px 8px rgba(255, 255, 255, 0.30);
}

.npc-name:active,
.my-name:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.18),
        0 4px 8px rgba(0, 0, 0, 0.06),
        inset 0 2px 4px rgba(0, 0, 0, 0.10),
        inset 0 -1px 4px rgba(255, 255, 255, 0.10);
    transition-duration: 0.06s;
}

/* ---- NPC 姓名框 · 深粉色（对应浅粉气泡） ---- */
.npc-name {
    background: radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 70%),
        #b34a4a;
    /* 主色：深粉色，与气泡阴影呼应 */
    box-shadow:
        0 4px 0 #7a2e2e,
        /* 更深粉色做厚度 */
        0 6px 12px rgba(0, 0, 0, 0.08),
        inset 0 -3px 6px rgba(0, 0, 0, 0.08),
        inset 0 2px 8px rgba(255, 255, 255, 0.20);
}
.npc-name:hover {
    box-shadow:
        0 6px 0 #7a2e2e,
        0 10px 20px rgba(0, 0, 0, 0.06),
        inset 0 -3px 6px rgba(0, 0, 0, 0.06),
        inset 0 2px 8px rgba(255, 255, 255, 0.28);
}
.npc-name:active {
    box-shadow:
        0 2px 0 #7a2e2e,
        0 4px 8px rgba(0, 0, 0, 0.06),
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 -1px 4px rgba(255, 255, 255, 0.08);
}

/* ---- 用户姓名框 · 深蓝色（对应浅蓝气泡） ---- */
.my-name {
    background: radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 70%),
        #2d5a8a;
    /* 主色：深蓝色，与气泡阴影呼应 */
    box-shadow:
        0 4px 0 #1a3f5a,
        /* 更深蓝色做厚度 */
        0 6px 12px rgba(0, 0, 0, 0.08),
        inset 0 -3px 6px rgba(0, 0, 0, 0.08),
        inset 0 2px 8px rgba(255, 255, 255, 0.20);
}
.my-name:hover {
    box-shadow:
        0 6px 0 #1a3f5a,
        0 10px 20px rgba(0, 0, 0, 0.06),
        inset 0 -3px 6px rgba(0, 0, 0, 0.06),
        inset 0 2px 8px rgba(255, 255, 255, 0.28);
}
.my-name:active {
    box-shadow:
        0 2px 0 #1a3f5a,
        0 4px 8px rgba(0, 0, 0, 0.06),
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 -1px 4px rgba(255, 255, 255, 0.08);
}

/* ======对话气泡（护眼配色）====== */
.talk-word {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border: 2px solid;
    border-radius: 8px;
    word-wrap: break-word;
    line-height: 1.6;
    font-size: 1em;
    position: relative;
}

/* ---- NPC 气泡 · 护眼浅粉色 ---- */
.npc-talk .talk-word {
    border-color: #d99e9e;
    background-color: #fce8e8;
    box-shadow: -6px 6px 0 0 #b34a4a;
}

/* ---- 用户气泡 · 护眼浅蓝色 ---- */
.my-talk .talk-word {
    border-color: #7ba9c9;
    background-color: #dceaf7;
    box-shadow: 6px 6px 0 0 #2d5a8a;
}

/* ======三角形（指向姓名框）====== */

/* ---- NPC：左侧 ---- */
.npc-talk .talk-word::before,
.npc-talk .talk-word::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 14px;
    width: 0;
    height: 0;
    border-style: solid;
}
.npc-talk .talk-word::before {
    border-width: 6px 8px 6px 0;
    border-color: transparent #d99e9e transparent transparent;
    filter: drop-shadow(-2px 2px 0 rgba(179, 74, 74, 0.15));
}
.npc-talk .talk-word::after {
    left: -5px;
    border-width: 5px 7px 5px 0;
    border-color: transparent #fce8e8 transparent transparent;
}

/* ---- 用户：右侧 ---- */
.my-talk .talk-word::before,
.my-talk .talk-word::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 14px;
    width: 0;
    height: 0;
    border-style: solid;
}
.my-talk .talk-word::before {
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #7ba9c9;
    filter: drop-shadow(2px 2px 0 rgba(45, 90, 138, 0.15));
}
.my-talk .talk-word::after {
    right: -5px;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #dceaf7;
}

/* ======深色模式====== */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1e24;
    }

    /* ---- 姓名框 深色 ---- */
    .npc-name {
        background: radial-gradient(circle at 30% 25%,
                rgba(255, 255, 255, 0.08) 0%,
                transparent 70%),
            #7a3a3a;
        /* 深粉色 */
        box-shadow:
            0 4px 0 #4a1a1a,
            0 6px 12px rgba(0, 0, 0, 0.25),
            inset 0 -3px 6px rgba(0, 0, 0, 0.15),
            inset 0 2px 8px rgba(255, 255, 255, 0.08);
        color: #e8edf5;
    }
    .npc-name:hover {
        box-shadow:
            0 6px 0 #4a1a1a,
            0 10px 20px rgba(0, 0, 0, 0.20),
            inset 0 -3px 6px rgba(0, 0, 0, 0.12),
            inset 0 2px 8px rgba(255, 255, 255, 0.12);
    }
    .npc-name:active {
        box-shadow:
            0 2px 0 #4a1a1a,
            0 4px 8px rgba(0, 0, 0, 0.20),
            inset 0 2px 4px rgba(0, 0, 0, 0.18),
            inset 0 -1px 4px rgba(255, 255, 255, 0.04);
    }

    .my-name {
        background: radial-gradient(circle at 30% 25%,
                rgba(255, 255, 255, 0.08) 0%,
                transparent 70%),
            #1a3f5a;
        /* 深蓝色 */
        box-shadow:
            0 4px 0 #0a1f2a,
            0 6px 12px rgba(0, 0, 0, 0.25),
            inset 0 -3px 6px rgba(0, 0, 0, 0.15),
            inset 0 2px 8px rgba(255, 255, 255, 0.08);
        color: #e8edf5;
    }
    .my-name:hover {
        box-shadow:
            0 6px 0 #0a1f2a,
            0 10px 20px rgba(0, 0, 0, 0.20),
            inset 0 -3px 6px rgba(0, 0, 0, 0.12),
            inset 0 2px 8px rgba(255, 255, 255, 0.12);
    }
    .my-name:active {
        box-shadow:
            0 2px 0 #0a1f2a,
            0 4px 8px rgba(0, 0, 0, 0.20),
            inset 0 2px 4px rgba(0, 0, 0, 0.18),
            inset 0 -1px 4px rgba(255, 255, 255, 0.04);
    }

    /* ---- 气泡 深色 ---- */
    .npc-talk .talk-word {
        border-color: #8a4a4a;
        background-color: #2a1a1a;
        color: #e0e4ec;
        box-shadow: -6px 6px 0 0 #4a2a2a;
    }
    .my-talk .talk-word {
        border-color: #4a7a9a;
        background-color: #1a2a3a;
        color: #e0e4ec;
        box-shadow: 6px 6px 0 0 #1a3a4a;
    }

    /* ---- 三角形 深色 ---- */
    .npc-talk .talk-word::before {
        border-color: transparent #8a4a4a transparent transparent;
        filter: drop-shadow(-2px 2px 0 rgba(74, 42, 42, 0.3));
    }
    .npc-talk .talk-word::after {
        border-color: transparent #2a1a1a transparent transparent;
    }
    .my-talk .talk-word::before {
        border-color: transparent transparent transparent #4a7a9a;
        filter: drop-shadow(2px 2px 0 rgba(26, 58, 74, 0.3));
    }
    .my-talk .talk-word::after {
        border-color: transparent transparent transparent #1a2a3a;
    }
}

/* ======小屏幕适配 (≤768px)====== */
@media (max-width: 768px) {
    .npc-talk,
    .my-talk {
        gap: 8px;
        margin-bottom: 18px;
    }

    .npc-name,
    .my-name {
        font-size: 0.95em;
        padding: 2px 10px;
        border-radius: 12px;
        margin-top: 0;
        transform: translateY(-1px);
        box-shadow:
            0 3px 0 rgba(0, 0, 0, 0.15),
            0 4px 10px rgba(0, 0, 0, 0.06),
            inset 0 -2px 4px rgba(0, 0, 0, 0.06),
            inset 0 2px 6px rgba(255, 255, 255, 0.20);
    }
    .npc-name:hover,
    .my-name:hover {
        transform: translateY(-2px);
        box-shadow:
            0 4px 0 rgba(0, 0, 0, 0.12),
            0 8px 16px rgba(0, 0, 0, 0.05),
            inset 0 -2px 4px rgba(0, 0, 0, 0.04),
            inset 0 2px 6px rgba(255, 255, 255, 0.25);
    }
    .npc-name:active,
    .my-name:active {
        transform: translateY(2px);
        box-shadow:
            0 1px 0 rgba(0, 0, 0, 0.18),
            0 3px 6px rgba(0, 0, 0, 0.05),
            inset 0 2px 4px rgba(0, 0, 0, 0.10),
            inset 0 -1px 4px rgba(255, 255, 255, 0.08);
    }

    .talk-word {
        padding: 8px 12px;
        font-size: 0.95em;
        border-width: 1.5px;
        border-radius: 6px;
    }

    .npc-talk .talk-word::before,
    .npc-talk .talk-word::after {
        top: 12px;
        left: -7px;
    }
    .npc-talk .talk-word::before {
        border-width: 5px 7px 5px 0;
    }
    .npc-talk .talk-word::after {
        left: -4px;
        border-width: 4px 6px 4px 0;
    }

    .my-talk .talk-word::before,
    .my-talk .talk-word::after {
        top: 12px;
        right: -7px;
    }
    .my-talk .talk-word::before {
        border-width: 5px 0 5px 7px;
    }
    .my-talk .talk-word::after {
        right: -4px;
        border-width: 4px 0 4px 6px;
    }

    .npc-talk .talk-word {
        box-shadow: -4px 4px 0 0 #b34a4a;
    }
    .my-talk .talk-word {
        box-shadow: 4px 4px 0 0 #2d5a8a;
    }
    @media (prefers-color-scheme: dark) {
        .npc-talk .talk-word {
            box-shadow: -4px 4px 0 0 #4a2a2a;
        }
        .my-talk .talk-word {
            box-shadow: 4px 4px 0 0 #1a3a4a;
        }
        .npc-name {
            box-shadow:
                0 3px 0 #4a1a1a,
                0 4px 10px rgba(0, 0, 0, 0.25),
                inset 0 -2px 4px rgba(0, 0, 0, 0.15),
                inset 0 2px 6px rgba(255, 255, 255, 0.06);
        }
        .my-name {
            box-shadow:
                0 3px 0 #0a1f2a,
                0 4px 10px rgba(0, 0, 0, 0.25),
                inset 0 -2px 4px rgba(0, 0, 0, 0.15),
                inset 0 2px 6px rgba(255, 255, 255, 0.06);
        }
    }
}