/* ---------- AI风月平台外壳适配 ---------- */
.chat-container .mx-auto.pt-24.w-full {
  max-width: 1180px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

#ai-chat-answer {
  width: 100% !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

#ai-chat-answer #customized-answer-avatar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
}

#ai-chat-answer .chat-answer-container {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

#ai-chat-answer #customized-answer-content {
  width: 100% !important;
  max-width: none !important;
  padding: 0 0 18px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#ai-chat-answer #customized-answer-content .markdown-body {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  container-type: inline-size;
}

/* ---------- 回复组件布局变量：不得与颜色、图片变量写在同一规则 ---------- */
.sm {
  --shiomi-canvas-w: 904px;
  --shiomi-dialog-w: 760px;
  --shiomi-dialog-h: 560px;
  --shiomi-rail: 72px;
  --shiomi-safe-x: 56px;
  --shiomi-safe-y: 52px;
  --shiomi-note-w: 64px;
  --shiomi-note-overlap: 18px;
}

/* ---------- 素材与颜色变量：夜间模式只转换这一组 ---------- */
.sm {
  --shiomi-frame: url("https://i.postimg.cc/fWqwpK9D/zhu-bian-kuang.png");
  --shiomi-inner-frame: url("https://i.postimg.cc/k4fnnNY2/nei-bian-kuang.png");
  --shiomi-tab-view: url("https://i.postimg.cc/1t9mh7B8/wai-kou1.png");
  --shiomi-tab-shop: url("https://i.postimg.cc/4dBJJv2X/wai-kou2.png");
  --shiomi-tab-history: url("https://i.postimg.cc/NFFQLyZR/wai-kou3.png");
  --shiomi-tab-player: url("https://i.postimg.cc/hvvKhJN9/wai-kou4.png");
  --shiomi-dial: url("https://i.postimg.cc/3RnKKjfm/ri-ye-tian-xiang-pan.png");
  --shiomi-paper: url("https://i.postimg.cc/fT3wN9ct/zhi-zhi-di.png");

  --sumiko-angry: url("https://i.postimg.cc/3JCY2QPj/Sumiko-Angry.png");
  --sumiko-happy: url("https://i.postimg.cc/PrzT1nBm/Sumiko-Happy.png");
  --sumiko-normal: url("https://i.postimg.cc/Wb6T0cQ6/Sumiko-Normal.png");
  --sumiko-sad: url("https://i.postimg.cc/bNHp1fKx/Sumiko-Sad.png");
  --sumiko-shy: url("https://i.postimg.cc/J4cMjC9Q/Sumiko-Shy-or-Embarrassed.png");
  --sumiko-surprised: url("https://i.postimg.cc/65LtCxDc/Sumiko-Surprised.png");
  --yuan: url("https://i.postimg.cc/KY31G5nD/yin-fan-yuan.png");
  --ying: url("https://i.postimg.cc/jjnDxhzh/yue-dai-ying.png");
  --zhenyu: url("https://i.postimg.cc/SKYnSGWM/mu-ye-zhen-yu.png");
  --shiyu: url("https://i.postimg.cc/JhHsrQbx/zhong-shi-yu.png");

  --bg-customs-house: url("https://i.postimg.cc/xdXwxwF7/customs-house.png");
  --bg-dock-day: url("https://i.postimg.cc/XvrRHRDT/dock-day.png");
  --bg-dock-night: url("https://i.postimg.cc/d0hbHbSg/dock-night.png");
  --bg-parking-lot: url("https://i.postimg.cc/TPKz7zHN/parking-lot.png");
  --bg-shiomiya-attic: url("https://i.postimg.cc/DzS9j9M7/shiomiya-attic.png");
  --bg-shiomiya-exterior: url("https://i.postimg.cc/d0hbHbxY/shiomiya-exterior.png");
  --bg-shiomiya-interior: url("https://i.postimg.cc/g0xCSCTJ/shiomiya-interior.png");
  --bg-street-day: url("https://i.postimg.cc/JhS99pfC/street-day.png");
  --bg-street-night: url("https://i.postimg.cc/q7W991P0/street-night.png");
  --bg-universal-day: url("https://i.postimg.cc/wjRK0KrZ/universal-day.png");
  --bg-universal-night: url("https://i.postimg.cc/XYBMQMPt/universal-night.png");


--cg-side-lying-2: url("https://file.garden/aUDHecPBjRiJY22D/CG-Side%20lying2.png");
--cg-fellatio-2: url("https://file.garden/aUDHecPBjRiJY22D/CG-Fellatio2.png");
--cg-cowgirl-2: url("https://file.garden/aUDHecPBjRiJY22D/CG-Cowgirl2.png");
--cg-missionary-2: url("https://file.garden/aUDHecPBjRiJY22D/CG-Missionary2.png");
--cg-doggy-style: url("https://file.garden/aUDHecPBjRiJY22D/CG-Doggy%20Style.png");
--cg-footjob: url("https://file.garden/aUDHecPBjRiJY22D/CG-Footjob.png");
--cg-side-lying: url("https://file.garden/aUDHecPBjRiJY22D/CG-Side%20lying.png");
--cg-footjob-2: url("https://file.garden/aUDHecPBjRiJY22D/CG-Footjob2.png");
--cg-missionary: url("https://file.garden/aUDHecPBjRiJY22D/CG-Missionary.png");
--cg-lotus-position: url("https://file.garden/aUDHecPBjRiJY22D/CG-Lotus%20Position.png");
--cg-doggy-style-2: url("https://file.garden/aUDHecPBjRiJY22D/CG-Doggy%20Style2.png");
--cg-cowgirl: url("https://file.garden/aUDHecPBjRiJY22D/CG-Cowgirl.png");
--cg-lotus-position-2: url("https://file.garden/aUDHecPBjRiJY22D/CG-Lotus%20Position2.png");
--cg-fellatio: url("https://file.garden/aUDHecPBjRiJY22D/CG-Fellatio.png");

--cg-sumiko-end-1: url("https://i.postimg.cc/cJtS28qp/2f2058f5-ff14-46ca-ac73-b03147e27d78.png");
--cg-sumiko-end-2: url("https://i.postimg.cc/rpRk3tX2/9f476d62-6a14-4d42-9671-bd2dbf407a22.png");


  /* 线索与道具素材 */
  --shiomi-prop-wisteria-paper: url("https://i.postimg.cc/PNGGrpPB/01-wisteria-paper.png");
  --shiomi-prop-shigure-postcard: url("https://i.postimg.cc/DmVVyJ89/02-shigure-postcard.png");
  --shiomi-prop-souichi-letter: url("https://i.postimg.cc/gr99kXxP/03-souichi-letter.png");
  --shiomi-prop-mana-bowl-card: url("https://i.postimg.cc/XXMM7GrS/04-mana-bowl-card.png");
  --shiomi-prop-sumiko-shop-key: url("https://i.postimg.cc/dDMMtkhQ/05-sumiko-shop-key.png");
  --shiomi-prop-old-shiromuku: url("https://i.postimg.cc/bdXXNDZw/06-old-shiromuku.png");
  --shiomi-prop-ginger-recipe: url("https://i.postimg.cc/V5yyLrJN/07-ginger-recipe.png");
  --shiomi-prop-tobi-blue-bookmark: url("https://i.postimg.cc/1R8ftk88/08-tobi-blue-bookmark.png");
  --shiomi-prop-luggage-tag: url("https://i.postimg.cc/Wpdh3BdZ/09-luggage-tag.png");
  --shiomi-prop-gauze-roll: url("https://i.postimg.cc/Y2vh95vg/10-gauze-roll.png");
  --shiomi-prop-chiyomatsu-matchbox: url("https://i.postimg.cc/05zbQTzn/11-chiyomatsu-matchbox.png");
  --shiomi-prop-souichi-cargo-knot: url("https://i.postimg.cc/7P5f6F5V/12-souichi-cargo-knot.png");

  --shiomi-wood: #302520;
  --shiomi-ink: #292620;
  --shiomi-paper-color: #e8e2cb;
  --shiomi-paper-light: #f1ead8;
  --shiomi-brass: #9b773f;
  --shiomi-green: #65735c;
  --shiomi-red: #7c190f;
  --shiomi-muted: #756f62;

  color: var(--shiomi-ink);
}

/* ---------- 回复组件基础尺寸 ---------- */
.sm {
  position: relative;
  isolation: isolate;
  width: var(--shiomi-canvas-w);
  height: calc(var(--shiomi-dialog-h) + 216px);
  max-width: none;
  margin: 18px 0 28px;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0;
  text-align: left;
  word-break: break-word;
}

.sm,
.sm * {
  box-sizing: border-box;
}

.sm * {
  letter-spacing: 0;
}

/* ---------- 固定主框与纸面视口 ---------- */
.sm-box {
  position: absolute;
  top: 0;
  left: var(--shiomi-rail);
  width: var(--shiomi-dialog-w);
  height: var(--shiomi-dialog-h);
  background: transparent;
}

.sm .sm-frame {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  pointer-events: none;
  user-select: none;
  object-fit: fill;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: brightness(1.04) drop-shadow(0 14px 18px rgba(32, 22, 18, 0.24)) drop-shadow(0 2px 3px rgba(32, 22, 18, 0.2)) !important;
}

.sm-vp {
  position: absolute;
  top: var(--shiomi-safe-y);
  right: var(--shiomi-safe-x);
  bottom: var(--shiomi-safe-y);
  left: var(--shiomi-safe-x);
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(76, 62, 42, 0.3);
  background-color: var(--shiomi-paper-color);
  background-image: none;
}

.sm .sm-paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  user-select: none;
  object-fit: cover;
  opacity: 0.96;
  visibility: visible !important;
  mix-blend-mode: normal !important;
}

/* ---------- 回合信息头 ---------- */
.sm-meta {
  position: absolute;
  inset: 0 0 auto;
  height: 116px;
  padding: 9px 124px 8px 14px;
  border-bottom: 1px solid rgba(72, 58, 41, 0.45);
  background: rgba(244, 238, 221, 0.22);
}

.sm-brand {
  margin: 0 0 4px;
  color: var(--shiomi-red);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.sm-cal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 9px;
  margin-bottom: 4px;
  color: #3c372f;
  font-size: 12px;
  line-height: 1.4;
}

.sm-cal time {
  font-size: 13px;
  font-weight: 700;
}

.sm-cal span {
  padding-left: 8px;
  border-left: 1px solid rgba(83, 68, 48, 0.35);
}

.sm-loc {
  display: flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 5px;
  color: #494238;
  font-size: 13px;
  line-height: 1.35;
}

.sm-loc::before {
  content: "所在地";
  flex: 0 0 auto;
  margin-right: 8px;
  padding: 1px 5px;
  border: 1px solid rgba(83, 68, 48, 0.45);
  color: var(--shiomi-muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 9px;
  line-height: 1.3;
}

.sm-trust {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #4a4137;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  line-height: 1;
}

.sm-trust > span {
  white-space: nowrap;
}

.sm-trust > strong {
  color: var(--shiomi-red);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sm-meter {
  position: relative;
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(68, 57, 43, 0.5);
  background: rgba(65, 55, 44, 0.12);
}

.sm-meter > span {
  display: block;
  width: var(--v, 0%);
  height: 100%;
  background: var(--meter-color, var(--shiomi-green));
}

.sm-trust .sm-meter > span {
  --meter-color: var(--shiomi-red);
}

.sm-dial {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 110px;
  height: 110px;
  background: var(--shiomi-dial) center / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(49, 37, 25, 0.18));
  color: #322e28;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.sm-wx,
.sm-day {
  position: absolute;
  display: block;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
}

.sm-wx {
  top: 31px;
  left: 14px;
  width: 54px;
}

.sm-day {
  right: 12px;
  bottom: 29px;
  width: 50px;
}

/* ---------- 正文与展示视口 ---------- */
.sm-read {
  position: absolute;
  inset: 116px 0 0;
  min-width: 0;
  overflow: hidden;
}

.sm-scroll,
.sm-stage {
  position: absolute;
  inset: 0;
}

.sm-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: #817255 rgba(77, 63, 45, 0.12);
  scrollbar-width: thin;
  padding: 14px 18px 26px 15px;
  color: var(--shiomi-ink);
  font-size: 15.5px;
  line-height: 1.9;
}

.sm-scroll::-webkit-scrollbar,
.sm-dc::-webkit-scrollbar {
  width: 8px;
}

.sm-scroll::-webkit-scrollbar-track,
.sm-dc::-webkit-scrollbar-track {
  background: rgba(75, 62, 45, 0.1);
}

.sm-scroll::-webkit-scrollbar-thumb,
.sm-dc::-webkit-scrollbar-thumb {
  border: 2px solid var(--shiomi-paper-color);
  background: #817255;
}

.sm-scroll > section p {
  margin: 0 0 1em;
}

.sm-main,
.sm-tail {
  min-width: 0;
}

.sm-lead::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--shiomi-red);
  font-size: 3.05em;
  font-weight: 700;
  line-height: 0.82;
}

.sm-think {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 10px;
  border-bottom: 1px solid rgba(78, 65, 47, 0.38);
  padding: 2px 2px 6px;
  color: #5a5247;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.sm-think::before {
  content: "◆";
  margin-right: 7px;
  color: var(--shiomi-brass);
  animation: shiomi-thinking 900ms ease-in-out infinite alternate;
}

.sm-think::after {
  content: "…";
  margin-left: 2px;
}

.sm-plan {
  position: absolute !important;
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- 下挂行动选项 ---------- */
.sm > .sm-a {
  position: absolute;
  top: calc(var(--shiomi-dialog-h) - 9px);
  left: calc(var(--shiomi-rail) + 40px);
  z-index: 8;
  width: calc(var(--shiomi-dialog-w) - 80px);
  counter-reset: shiomi-action;
  color: var(--shiomi-ink);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
}

.sm > .sm-a::before {
  content: "抉择";
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: #2a1d10;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px rgba(255, 232, 153, 0.42);
  pointer-events: none;
}

.sm > .sm-a > img {
  display: block !important;
  width: 100% !important;
  height: 60px !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: cover;
  object-position: center 45.7%;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 4px 5px rgba(37, 27, 21, 0.24)) !important;
  pointer-events: none;
  user-select: none;
}

.sm > .sm-a > p {
  counter-increment: shiomi-action;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: 33px;
  margin: 0 30px !important;
  border-right: 1px solid rgba(114, 84, 39, 0.72);
  border-bottom: 1px solid rgba(114, 84, 39, 0.42);
  border-left: 1px solid rgba(114, 84, 39, 0.72);
  padding: 5px 10px;
  background-color: rgba(241, 234, 216, 0.97);
  background-image: var(--shiomi-paper);
  background-position: center;
  background-size: cover;
  color: #393229;
  font-size: 13px;
  line-height: 1.45;
}

.sm > .sm-a > p:first-of-type {
  margin-top: -3px !important;
  border-top: 1px solid rgba(114, 84, 39, 0.72);
}

.sm > .sm-a > p::before {
  content: counter(shiomi-action, upper-alpha);
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid #a7864e;
  background: var(--shiomi-wood);
  color: #f2e7ca;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(234, 208, 145, 0.18);
}

.sm > .sm-a > p:last-child {
  color: #6a4a39;
}

.sm > .sm-a > p:last-child::before {
  background: var(--shiomi-red);
}

@keyframes shiomi-thinking {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.sm-turn {
  margin: 0 0 14px;
  border-top: 1px solid rgba(78, 65, 47, 0.38);
  border-bottom: 1px solid rgba(78, 65, 47, 0.38);
  color: #5a5247;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  line-height: 1.55;
}

.sm-turn summary {
  display: flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 2px;
  cursor: pointer;
  touch-action: manipulation;
  list-style: none;
  font-weight: 700;
}

.sm-turn summary::-webkit-details-marker {
  display: none;
}

.sm-turn summary::before {
  content: "◇";
  margin-right: 7px;
  color: var(--shiomi-brass);
}

.sm-turn[open] summary::before {
  content: "◆";
}

.sm-turn p {
  margin: 0;
  padding: 1px 4px 8px 19px;
}

.sm .sm-say-s,
.sm .sm-say-p {
  margin: 10px 0 15px;
  padding: 7px 10px 8px 12px;
  border-left: 3px solid var(--dialogue-color, var(--shiomi-red));
  background: rgba(255, 255, 255, 0.34);
}

.sm-say-s {
  --dialogue-color: var(--shiomi-red);
}

.sm-say-p {
  --dialogue-color: var(--shiomi-green);
}

.sm .sm-say-s > span,
.sm .sm-say-p > span {
  display: block;
  margin-bottom: 2px;
  color: var(--dialogue-color, var(--shiomi-red));
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.sm .sm-say-s > p,
.sm .sm-say-p > p {
  margin: 0;
}

.sm-break {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 17px 0;
  color: var(--shiomi-brass);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.sm-break::before,
.sm-break::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(109, 85, 49, 0.42);
}

.sm-tail {
  min-height: 194px;
}

.sm-tail::after {
  content: "";
  display: block;
  clear: both;
}

.sm-news {
  float: right;
  width: 218px;
  height: 172px;
  margin: 4px 0 12px 18px;
  overflow: hidden;
  border: 1px solid #4b4439;
  padding: 8px 10px 9px;
  background-color: var(--shiomi-paper-light);
  background-image: var(--shiomi-paper);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 3px rgba(75, 65, 52, 0.16), 2px 3px 0 rgba(62, 48, 34, 0.12);
  color: #2f2c27;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
}

.sm-news h3 {
  margin: 0 0 5px;
  border-top: 3px double #3c3831;
  border-bottom: 1px solid #3c3831;
  padding: 2px 0 3px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

.sm-news p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.42;
  text-align: justify;
}

/* ---------- 展示区背景与角色立绘 ---------- */
.sm-stage {
  display: none;
  overflow: hidden;
  background: #2b312d;
}

.sm-stage .scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #2b312d;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sm-stage .character {
  position: absolute;
  right: 2%;
  bottom: 0;
  z-index: 2;
  width: 58%;
  height: 98%;
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 8px rgba(25, 20, 18, 0.24));
}

.sm-stage .c1,
.sm-stage .c2 {
  width: 54%;
}

.sm-stage .c1 {
  right: auto;
  left: -3%;
}

.sm-stage .c2 {
  right: -3%;
  left: auto;
}

.sm-stage .cg-mode .character {
  display: none;
}

.sm-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  min-height: 42px;
  border-top: 1px solid rgba(182, 145, 79, 0.75);
  padding: 8px 14px 9px;
  background: rgba(40, 30, 25, 0.88);
  color: #f0e8d4;
  font-size: 12px;
  line-height: 1.5;
  text-shadow: 0 1px 1px #1c1512;
}

.sm-stage .bg-customs-house { background-image: var(--bg-customs-house); }
.sm-stage .bg-dock-day { background-image: var(--bg-dock-day); }
.sm-stage .bg-dock-night { background-image: var(--bg-dock-night); }
.sm-stage .bg-parking-lot { background-image: var(--bg-parking-lot); }
.sm-stage .bg-shiomiya-attic { background-image: var(--bg-shiomiya-attic); }
.sm-stage .bg-shiomiya-exterior { background-image: var(--bg-shiomiya-exterior); }
.sm-stage .bg-shiomiya-interior { background-image: var(--bg-shiomiya-interior); }
.sm-stage .bg-street-day { background-image: var(--bg-street-day); }
.sm-stage .bg-street-night { background-image: var(--bg-street-night); }
.sm-stage .bg-universal-day { background-image: var(--bg-universal-day); }
.sm-stage .bg-universal-night { background-image: var(--bg-universal-night); }

.sm-stage .sumiko-angry { background-image: var(--sumiko-angry); }
.sm-stage .sumiko-happy { background-image: var(--sumiko-happy); }
.sm-stage .sumiko-normal { background-image: var(--sumiko-normal); }
.sm-stage .sumiko-sad { background-image: var(--sumiko-sad); }
.sm-stage .sumiko-shy { background-image: var(--sumiko-shy); }
.sm-stage .sumiko-surprised { background-image: var(--sumiko-surprised); }
.sm-stage .yuan { background-image: var(--yuan); }
.sm-stage .ying { background-image: var(--ying); }
.sm-stage .zhenyu { background-image: var(--zhenyu); }
.sm-stage .shiyu { background-image: var(--shiyu); }

/* ---------- 外侧便签 ---------- */
.sm > .sm-n {
  --drawer-enter-x: -10px;
  position: absolute;
  width: var(--shiomi-note-w);
  height: 108px;
  color: var(--shiomi-ink);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.sm > .sm-player {
  --drawer-enter-x: 10px;
}

.sm > .sm-n > summary {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--shiomi-note-w);
  height: 108px;
  margin: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  list-style: none;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 5px rgba(37, 27, 21, 0.22));
  transition: filter 150ms ease, transform 150ms ease;
}

.sm > .sm-n > summary::-webkit-details-marker {
  display: none;
}

.sm > .sm-n > summary::marker {
  content: "";
}

.sm > .sm-n > summary:hover {
  filter: brightness(1.04) drop-shadow(0 5px 6px rgba(37, 27, 21, 0.25));
}

.sm > .sm-n > summary:focus-visible {
  outline: 2px solid #b38b49;
  outline-offset: 3px;
}

.sm > .sm-n > summary > span {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
  text-shadow: 0 1px rgba(255, 255, 255, 0.45);
}

.sm > .sm-view > summary > span,
.sm > .sm-shop > summary > span,
.sm > .sm-hist > summary > span {
  transform: translateX(-4px);
}

.sm > .sm-player > summary > span,
.sm > .sm-prop > summary > span {
  transform: translateX(4px);
}

.sm > .sm-view {
  top: 34px;
  left: calc(var(--shiomi-rail) - var(--shiomi-note-w) + var(--shiomi-note-overlap));
}

.sm > .sm-view > summary {
  background-image: var(--shiomi-tab-view);
}

.sm > .sm-shop {
  top: 142px;
  left: calc(var(--shiomi-rail) - var(--shiomi-note-w) + var(--shiomi-note-overlap));
}

.sm > .sm-shop > summary {
  background-image: var(--shiomi-tab-shop);
}

.sm > .sm-hist {
  top: 310px;
  left: calc(var(--shiomi-rail) - var(--shiomi-note-w) + var(--shiomi-note-overlap));
}

.sm > .sm-hist > summary {
  background-image: var(--shiomi-tab-history);
}

.sm > .sm-player {
  top: 196px;
  right: calc(var(--shiomi-rail) - var(--shiomi-note-w) + var(--shiomi-note-overlap));
  color: #f3ead5;
}

.sm > .sm-player > summary,
.sm > .sm-prop > summary {
  background-image: var(--shiomi-tab-player);
}

.sm > .sm-prop {
  --drawer-enter-x: 10px;
  top: 310px;
  right: calc(var(--shiomi-rail) - var(--shiomi-note-w) + var(--shiomi-note-overlap));
  color: #f3ead5;
}

.sm > .sm-player > summary > .sm-tab {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: fill;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.sm > .sm-player > summary > span,
.sm > .sm-prop > summary > span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 1px rgba(48, 14, 8, 0.8);
}

.sm-vt {
  display: none;
}

.sm > .sm-view[open] .sm-vs {
  display: none;
}

.sm > .sm-view[open] .sm-vt {
  display: block;
}

.sm > .sm-view[open] ~ .sm-box .sm-stage {
  display: block;
}

.sm > .sm-view[open] ~ .sm-box .sm-scroll {
  display: none;
}

/* ---------- 向内展开的状态抽屉 ---------- */
.sm-db {
  position: absolute;
  z-index: 20;
  border: 20px solid transparent;
  padding: 7px 8px;
  background-color: var(--shiomi-paper-color);
  background-image: var(--shiomi-paper);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: padding-box;
  border-image-source: var(--shiomi-inner-frame);
  border-image-slice: 100;
  border-image-width: 20px;
  border-image-repeat: stretch;
  box-shadow: 5px 8px 14px rgba(49, 35, 25, 0.2);
  animation: shiomi-drawer-in 170ms ease-out both;
}

@keyframes shiomi-drawer-in {
  from {
    opacity: 0;
    transform: translateX(var(--drawer-enter-x));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sm > .sm-shop > .sm-db {
  top: -70px;
  left: calc(var(--shiomi-note-w) + var(--shiomi-safe-x) - var(--shiomi-note-overlap));
  width: 270px;
  height: 330px;
}

.sm > .sm-hist > .sm-db {
  top: -250px;
  left: calc(var(--shiomi-note-w) + var(--shiomi-safe-x) - var(--shiomi-note-overlap));
  width: 350px;
  height: 398px;
}

.sm > .sm-player > .sm-db {
  top: -90px;
  right: calc(var(--shiomi-note-w) + var(--shiomi-safe-x) - var(--shiomi-note-overlap));
  width: 280px;
  height: 310px;
}

.sm > .sm-prop > .sm-db {
  top: -250px;
  right: calc(var(--shiomi-note-w) + var(--shiomi-safe-x) - var(--shiomi-note-overlap));
  width: 390px;
  height: 430px;
}

.sm-dc {
  height: 100%;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #817255 rgba(77, 63, 45, 0.12);
  scrollbar-width: thin;
  padding: 1px 4px 3px;
  color: #352f28;
  font-size: 12px;
  line-height: 1.55;
}

.sm-dc > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  border-bottom: 3px double rgba(67, 54, 38, 0.62);
  padding: 0 1px 5px;
}

.sm-dc > header h3 {
  margin: 0;
  color: var(--shiomi-wood);
  font-size: 15px;
  line-height: 1.3;
}

.sm-dc > header small {
  color: var(--shiomi-muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 9px;
}

.sm-dc > dl {
  margin: 0;
}

.sm-dc > dl > div {
  display: grid;
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-bottom: 1px dotted rgba(72, 60, 44, 0.38);
  padding: 5px 1px;
}

.sm-dc > dl dt {
  color: var(--shiomi-muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.sm-dc > dl dd {
  min-width: 0;
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.sm-money {
  color: #765822;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.sm > .sm-shop .sm-dc > section {
  margin-top: 10px;
}

.sm > .sm-shop .sm-dc > section h4 {
  margin: 0 0 5px;
  color: var(--shiomi-wood);
  font-size: 12px;
  line-height: 1.4;
}

.sm-rel {
  margin: 0 0 8px;
}

.sm-rel:last-child {
  margin-bottom: 0;
}

.sm-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.sm-row strong {
  color: #554b3f;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.sm-tags > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(91, 69, 43, 0.52);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.26);
  color: #514538;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.35;
}

.sm-shelf {
  display: block;
}

.sm-it {
  --dot-off: #a7a094;
  --dot-on: #5f8a61;
  --d1: var(--dot-off);
  --d2: var(--dot-off);
  --d3: var(--dot-off);
  --shown: "？？？";
  --txt: "文案占位：后续补写。";
  --note: "尚未取得。";
  --fx: grayscale(1) brightness(0);
  --op: 0.72;
  margin: 0 0 6px;
}

.sm-it.s1 { --d1: var(--dot-on); }
.sm-it.s2 { --d1: var(--dot-on); --d2: var(--dot-on); }
.sm-it.s3 { --d1: var(--dot-on); --d2: var(--dot-on); --d3: var(--dot-on); }
.sm-it.one { --d2: transparent; --d3: transparent; }

.sm-it.none.s3,
.sm-it[class*=" got"] {
  --shown: var(--nm);
  --note: var(--txt);
  --fx: none;
  --op: 1;
}

.sm-it > summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 50px;
  border-bottom: 1px dotted rgba(72, 60, 44, 0.38);
  padding: 4px 48px 4px 4px;
  cursor: pointer;
  list-style: none;
  background:
    radial-gradient(circle at calc(100% - 36px) 50%, var(--d1) 0 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 24px) 50%, var(--d2) 0 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) 50%, var(--d3) 0 4px, transparent 4.5px),
    rgba(255, 255, 255, 0.18);
}

.sm-it > summary::-webkit-details-marker {
  display: none;
}

.sm-it > summary::marker {
  content: "";
}

.sm-it > summary::before {
  content: "";
  display: block;
  width: 42px;
  height: 38px;
  background: var(--img) center / contain no-repeat;
  filter: var(--fx);
  opacity: var(--op);
}

.sm-it > summary::after {
  content: var(--season) "　" var(--shown);
  min-width: 0;
  overflow: hidden;
  color: #4c4135;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-it[open]::after {
  content: var(--note);
  display: block;
  margin: 4px 0 7px 54px;
  color: #5e5549;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.45;
}

.sm-it.none { --season: "七月下旬"; --img: linear-gradient(135deg, #171411, #3d3429); --nm: "无实物奖励"; }
.sm-it.p1 { --season: "七月上旬"; --img: var(--shiomi-prop-wisteria-paper); --nm: "淡藤色包纸样"; --txt: "一张淡藤色的旧洋纸样。纸面薄而硬，边角压着一点米粒痕，看上去像被夹在账本里放过一阵。"; }
.sm-it.p2 { --season: "八月上旬"; --img: var(--shiomi-prop-shigure-postcard); --nm: "時雨的明信片草稿"; --txt: "一张门司港明信片的写废稿。背面铅笔字被反复擦改，纸面发灰，摸起来有细细的纸屑感。"; }
.sm-it.p3 { --season: "八月下旬"; --img: var(--shiomi-prop-souichi-letter); --nm: "惣一的信"; --txt: "一封写给澄子的旧信。信封被汗水和潮气浸皱，封口不太平整，纸上留有海风吹过似的咸湿感。"; }
.sm-it.p4 { --season: "九月下旬"; --img: var(--shiomi-prop-mana-bowl-card); --nm: "真鱼的浅碗试卖卡"; --txt: "一张小小的试卖卡。卡纸晒得略软，浅碗和白玉的线条画得很圆，背面有几行急匆匆补上的字。"; }
.sm-it.p5 { --season: "九月上旬"; --img: var(--shiomi-prop-sumiko-shop-key); --nm: "澄子的备用店钥匙"; --txt: "一枚店里的备用钥匙。钥匙齿有点磨钝，系着一段旧蓝绳，握在手里带着冷硬的金属感。"; }
.sm-it.p6 { --season: "九月上旬"; --img: var(--shiomi-prop-old-shiromuku); --nm: "有些发旧的白无垢"; --txt: "一件收在木箱里的白无垢。白绢仍旧细密，袖口微微泛黄，折痕里有淡淡的樟脑味。"; }
.sm-it.p7 { --season: "十月上旬"; --img: var(--shiomi-prop-ginger-recipe); --nm: "女仆的姜汤方"; --txt: "一张手写姜汤方子。纸边收得很齐，字像算盘珠一样规整，闻起来有一点干姜和旧墨的气味。"; }
.sm-it.p8 { --season: "十二月上旬"; --img: var(--shiomi-prop-tobi-blue-bookmark); --nm: "鸢的雾蓝布样书签"; --txt: "一枚用雾蓝布样裁成的书签。布面细软，颜色沉静，边缘缝得很小心，夹在纸页间不太显眼。"; }
.sm-it.p9 { --season: "十月下旬"; --img: var(--shiomi-prop-luggage-tag); --nm: "改写行李札"; --txt: "一张皱巴巴的行李札。原本的目的地被墨涂过，纸面起毛，背胶处还沾着一点箱底红豆粉。"; }
.sm-it.p10 { --season: "十一月上旬"; --img: var(--shiomi-prop-gauze-roll); --nm: "医者的纱布卷"; --txt: "一小卷干净纱布。纱眼细而整齐，卷得很紧，贴近时能闻到淡淡的石炭酸和药柜木头味。"; }
.sm-it.p11 { --season: "十一月下旬"; --img: var(--shiomi-prop-chiyomatsu-matchbox); --nm: "千代松旧火柴盒"; --txt: "一个用旧了的火柴盒。盒角磨白，侧边磷皮发灰，盒底写着一行像玩笑又像账目备注的小字。"; }
.sm-it.p12 { --season: "十二月下旬"; --img: var(--shiomi-prop-souichi-cargo-knot); --nm: "惣一货包绳结"; --txt: "一枚旧包装绳结。绳股被海风和货箱磨得发硬，结法规整，却有几处不合寻常货包习惯的绕法。"; }

.sm > .sm-hist .sm-dc > section + section {
  margin-top: 11px;
  border-top: 1px solid rgba(75, 62, 45, 0.38);
  padding-top: 9px;
}

.sm > .sm-hist .sm-dc > section h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--shiomi-wood);
  font-size: 12px;
}

.sm > .sm-hist .sm-dc > section h4 span {
  color: var(--shiomi-muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 9px;
  font-weight: 400;
}

.sm-ltm,
.sm-stm {
  margin: 0;
}

.sm-ltm {
  padding-left: 20px;
}

.sm-ltm li {
  margin-bottom: 5px;
  padding-left: 2px;
}

.sm-stm {
  padding: 0;
  list-style: none;
}

.sm-stm li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 2px 8px;
  border-bottom: 1px dotted rgba(72, 60, 44, 0.36);
  padding: 6px 0;
}

.sm-stm time,
.sm-stm li > span {
  color: var(--shiomi-muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 9px;
}

.sm-stm p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}

/* ---------- 中等宽度：只做有限缩放 ---------- */
@container (min-width: 681px) and (max-width: 903px) {
  .sm {
    zoom: 0.75;
    zoom: max(0.75, min(1, calc((100cqw - 8px) / var(--shiomi-canvas-w))));
    margin-top: 12px;
    margin-bottom: 18px;
  }
}

/* ---------- 窄内容区：独立移动端竖向布局 ---------- */
@container (max-width: 680px) {
  .sm {
    --shiomi-canvas-w: calc(100cqw - 40px);
    --shiomi-dialog-w: var(--shiomi-canvas-w);
    --shiomi-dialog-h: 620px;
    --shiomi-rail: 0px;
    --shiomi-safe-x: 0px;
    --shiomi-safe-y: 0px;
    --shiomi-note-w: 52px;
    --shiomi-note-overlap: 32px;

    width: calc(100cqw - 40px);
    height: 870px;
    margin: 14px 20px 24px;
    zoom: 1;
  }

  .sm-box {
    left: 0;
    width: 100%;
    height: var(--shiomi-dialog-h);
    border: 28px solid transparent;
    background: transparent;
    border-image-source: var(--shiomi-frame);
    border-image-slice: 100 108 100 108;
    border-image-width: 28px;
    border-image-outset: 0;
    border-image-repeat: stretch;
  }

  .sm > .sm-a {
    top: calc(var(--shiomi-dialog-h) - 7px);
    left: 12px;
    width: calc(100% - 24px);
  }

  .sm > .sm-a::before {
    top: 14px;
    font-size: 8px;
  }

  .sm > .sm-a > img {
    height: 30px !important;
  }

  .sm > .sm-a > p {
    grid-template-columns: 27px minmax(0, 1fr);
    min-height: 38px;
    margin-right: 8px !important;
    margin-left: 8px !important;
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.55;
  }

  .sm .sm-frame {
    display: none !important;
  }

  .sm-vp {
    inset: 0;
  }

  .sm-meta {
    height: 120px;
    padding: 9px 94px 8px 12px;
  }

  .sm-brand {
    margin-bottom: 3px;
    font-size: 13px;
  }

  .sm-cal {
    gap: 2px 6px;
    margin-bottom: 3px;
    font-size: 11px;
  }

  .sm-cal time {
    font-size: 12px;
  }

  .sm-cal span {
    padding-left: 5px;
  }

  .sm-loc {
    min-height: 20px;
    margin-bottom: 4px;
    font-size: 12px;
  }

  .sm-loc::before {
    margin-right: 6px;
  }

  .sm-trust {
    grid-template-columns: 54px minmax(0, 1fr) 40px;
    gap: 5px;
    font-size: 10px;
  }

  .sm-dial {
    top: 3px;
    right: 3px;
    width: 84px;
    height: 84px;
    font-size: 11px;
  }

  .sm-wx {
    top: 24px;
    left: 10px;
    width: 42px;
  }

  .sm-day {
    right: 8px;
    bottom: 22px;
    width: 40px;
  }

  .sm-read {
    inset: 120px 0 0;
  }

  .sm-scroll {
    padding: 12px 13px 22px;
    font-size: 15px;
    line-height: 1.85;
  }

  .sm-stage .character {
    width: 72%;
  }

  .sm-stage .c1,
  .sm-stage .c2 {
    width: 66%;
  }

  .sm-stage .c1 {
    left: -18%;
  }

  .sm-stage .c2 {
    right: -18%;
  }

  .sm-cap {
    padding: 7px 11px 8px;
    font-size: 11px;
  }

  .sm-tail {
    min-height: 170px;
  }

  .sm-news {
    width: 142px;
    height: 150px;
    margin: 4px 0 10px 12px;
    padding: 7px 8px 8px;
  }

  .sm-news h3 {
    margin-bottom: 4px;
    font-size: 11.5px;
  }

  .sm-news p {
    font-size: 9px;
    line-height: 1.38;
  }

  .sm > .sm-n,
  .sm > .sm-n > summary {
    width: 52px;
    height: 88px;
  }

  .sm > .sm-n > summary > span {
    font-size: 14px;
  }

  .sm > .sm-view > summary > span,
  .sm > .sm-shop > summary > span,
  .sm > .sm-hist > summary > span {
    transform: translateX(-2px);
  }

  .sm > .sm-player > summary > span,
  .sm > .sm-prop > summary > span {
    transform: translateX(2px);
  }

  .sm > .sm-view {
    top: 30px;
    left: -20px;
  }

  .sm > .sm-shop {
    top: 126px;
    left: -20px;
  }

  .sm > .sm-hist {
    top: 222px;
    left: -20px;
  }

  .sm > .sm-player {
    top: 126px;
    right: -20px;
  }

  .sm > .sm-prop {
    top: 222px;
    right: -20px;
  }

  .sm-db {
    border-width: 16px;
    border-image-width: 16px;
    padding: 6px;
  }

  .sm > .sm-shop > .sm-db {
    top: -96px;
    left: 64px;
    width: calc(100cqw - 128px);
    height: 390px;
  }

  .sm > .sm-hist > .sm-db {
    top: -192px;
    left: 64px;
    width: calc(100cqw - 128px);
    height: 530px;
  }

  .sm > .sm-player > .sm-db {
    top: -96px;
    right: 64px;
    width: calc(100cqw - 128px);
    height: 340px;
  }

  .sm > .sm-prop > .sm-db {
    top: -192px;
    right: 64px;
    width: calc(100cqw - 128px);
    height: 530px;
  }

  .sm-dc {
    font-size: 12.5px;
  }
}

/* ---------- 320px 级别超窄屏 ---------- */
@container (max-width: 360px) {
  .sm {
    --shiomi-canvas-w: calc(100cqw - 24px);
    --shiomi-dialog-w: var(--shiomi-canvas-w);
    --shiomi-dialog-h: 600px;
    --shiomi-note-w: 46px;
    --shiomi-note-overlap: 34px;
    width: calc(100cqw - 24px);
    height: 850px;
    margin-right: 12px;
    margin-left: 12px;
  }

  .sm-box {
    border-width: 24px;
    border-image-width: 24px;
  }

  .sm-meta {
    height: 116px;
    padding-right: 80px;
    padding-left: 10px;
  }

  .sm-dial {
    width: 72px;
    height: 72px;
    font-size: 10px;
  }

  .sm-wx {
    top: 20px;
    left: 8px;
    width: 36px;
  }

  .sm-day {
    right: 7px;
    bottom: 18px;
    width: 34px;
  }

  .sm-read {
    inset: 116px 0 0;
  }

  .sm > .sm-n,
  .sm > .sm-n > summary {
    width: 46px;
    height: 78px;
  }

  .sm > .sm-view {
    top: 28px;
    left: -12px;
  }

  .sm > .sm-shop,
  .sm > .sm-player {
    top: 114px;
  }

  .sm > .sm-shop {
    left: -12px;
  }

  .sm > .sm-player {
    right: -12px;
  }

  .sm > .sm-hist {
    top: 200px;
    left: -12px;
  }

  .sm > .sm-prop {
    top: 200px;
    right: -12px;
  }

  .sm-db {
    border-width: 14px;
    border-image-width: 14px;
  }

  .sm > .sm-shop > .sm-db {
    top: -86px;
    left: 44px;
    width: calc(100cqw - 88px);
    height: 370px;
  }

  .sm > .sm-hist > .sm-db {
    top: -172px;
    left: 44px;
    width: calc(100cqw - 88px);
    height: 510px;
  }

  .sm > .sm-player > .sm-db {
    top: -86px;
    right: 44px;
    width: calc(100cqw - 88px);
    height: 330px;
  }

  .sm > .sm-prop > .sm-db {
    top: -172px;
    right: 44px;
    width: calc(100cqw - 88px);
    height: 510px;
  }

  .sm-news {
    width: 128px;
    height: 144px;
    margin-left: 10px;
  }

  .sm-news p {
    font-size: 8.5px;
  }
}

@media (max-width: 640px) {
  .chat-container .mx-auto.pt-24.w-full {
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  #ai-chat-answer #customized-answer-content .markdown-body {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 0 0 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm > .sm-n > summary {
    transition: none;
  }

  .sm-think::before {
    animation: none;
  }

  .sm-db {
    animation: none;
  }
}
/* 《潮待的汐见屋》AI风月原生外壳美化
   单独粘贴到内联 CSS；不写入回复模板 HTML/CSS 文件。
   重点覆盖：顶部栏、模型选择器、输入区、发送按钮、消息操作按钮、评论/弹窗等平台原生 UI。
*/

* {
  --shiomi-native-plate: url("https://i.postimg.cc/FHKC1YCY/an-niu-di-pian-kou-tu.png");
  --shiomi-native-paper: url("https://i.postimg.cc/RZ0pqWp3/zhi-zhang-wen-li.png");
  --shiomi-native-wood: #302520;
  --shiomi-native-ink: #292620;
  --shiomi-native-paper-color: #e8e2cb;
  --shiomi-native-paper-light: #f2ecd9;
  --shiomi-native-brass: #9b773f;
  --shiomi-native-brass-dark: #6d512b;
  --shiomi-native-red: #7c190f;
  --shiomi-native-green: #65735c;
  --shiomi-native-muted: #756f62;
  --shiomi-native-shadow: rgba(43, 31, 24, 0.22);
  --shiomi-native-serif: "Yu Mincho", "Hiragino Mincho ProN", "Shippori Mincho", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
  --shiomi-native-kai: "Kaiti SC", "STKaiti", KaiTi, "Yu Mincho", "Songti SC", STSong, serif;
}

/* ---------- 页面纸面与滚动条 ---------- */
.relative.w-full.h-full.overflow-hidden,
.chat-container {
  color-scheme: light;
  color: var(--shiomi-native-ink) !important;
  font-family: var(--shiomi-native-serif) !important;
  background:
    linear-gradient(180deg, rgba(48, 37, 32, 0.08), rgba(48, 37, 32, 0) 150px),
    var(--shiomi-native-paper) center / 420px auto repeat,
    var(--shiomi-native-paper-color) !important;
  scrollbar-color: #817255 rgba(77, 63, 45, 0.12);
  scrollbar-width: thin;
}

button,
input,
textarea,
.MuiButton-root,
.MuiTypography-root {
  font-family: var(--shiomi-native-serif) !important;
  letter-spacing: 0 !important;
}

.dark\:bg-background,
.dark\:bg-secondary,
.bg-background,
.bg-secondary {
  background-color: transparent !important;
}

.text-text-main,
.dark\:text-text-main,
.dark\:text-foreground,
.text-gray-900,
.text-gray-700 {
  color: var(--shiomi-native-ink) !important;
}

.text-text-secondary,
.dark\:text-text-secondary,
.text-text-tertiary {
  color: var(--shiomi-native-muted) !important;
}

.text-purple-500,
#customized-answer-content-model,
#customized-answer-content-model-name,
#customized-answer-content-model-input-points,
#customized-answer-content-model-output-points {
  color: #6c5b43 !important;
}

.text-orange-500,
.text-warning {
  color: var(--shiomi-native-red) !important;
}

.border-gray-100,
.border-gray-200,
.border-grey-300,
.dark\:border-border {
  border-color: rgba(81, 62, 40, 0.42) !important;
}

@media (prefers-color-scheme: dark) {
  .relative.w-full.h-full.overflow-hidden,
  .chat-container,
  .sticky.w-full.top-0.flex.items-center,
  .bg-gradient-to-t.from-white.via-white.to-transparent.absolute.w-full.bottom-0.left-0.right-0 {
    color-scheme: light;
    color: var(--shiomi-native-ink) !important;
    background:
      linear-gradient(180deg, rgba(255, 250, 235, 0.68), rgba(226, 213, 184, 0.72)),
      var(--shiomi-native-paper) center / 420px auto repeat,
      var(--shiomi-native-paper-color) !important;
  }
}

.chat-container::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.chat-container::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
  background: rgba(75, 62, 45, 0.1);
}

.chat-container::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  border: 2px solid var(--shiomi-native-paper-color);
  background: #817255;
}

/* ---------- 顶部栏 ---------- */
.sticky.w-full.top-0.flex.items-center {
  border-bottom: 1px solid rgba(75, 59, 39, 0.38) !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 235, 0.84), rgba(231, 220, 194, 0.9)),
    var(--shiomi-native-paper) center / 360px auto repeat !important;
  box-shadow:
    0 8px 18px rgba(47, 36, 28, 0.11),
    inset 0 -1px rgba(255, 255, 255, 0.36) !important;
  color: var(--shiomi-native-ink) !important;
  backdrop-filter: blur(5px) saturate(0.9) !important;
}

#customized-model-selector {
  color: var(--shiomi-native-ink) !important;
}

#ai-model-selector,
#customized-model-selector [class*="bg-grey-100"],
#customized-model-selector [class*="bg-gray-100"] {
  min-height: 32px !important;
  border: 1px solid rgba(91, 69, 43, 0.58) !important;
  border-radius: 2px !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 232, 0.62), rgba(210, 191, 150, 0.2)),
    var(--shiomi-native-paper) center / 320px auto repeat !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.45),
    0 2px 4px rgba(47, 36, 28, 0.12) !important;
}

#ai-model-selector .truncate,
#customized-model-selector .truncate {
  color: var(--shiomi-native-ink) !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#ai-model-selector:hover,
#customized-model-selector [class*="bg-grey-100"]:hover,
#customized-model-selector [class*="bg-gray-100"]:hover {
  border-color: rgba(124, 25, 15, 0.62) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.52),
    0 3px 6px rgba(47, 36, 28, 0.16) !important;
}

.sticky.w-full.top-0 .MuiIconButton-root,
.sticky.w-full.top-0 button:has(.lucide-clock8),
.sticky.w-full.top-0 button:has(.lucide-clock-8),
.sticky.w-full.top-0 button:has(.lucide-music2),
.sticky.w-full.top-0 button:has(.lucide-music-2),
.sticky.w-full.top-0 button:has(.lucide-bell),
.sticky.w-full.top-0 button:has(.lucide-globe),
#header-setting-button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border: 1px solid rgba(92, 68, 38, 0.54) !important;
  border-radius: 1px !important;
  padding: 0 !important;
  background-image:
    var(--shiomi-native-plate),
    linear-gradient(180deg, #443129, #261d19) !important;
  background-position: center, center !important;
  background-size: 100% 100%, auto !important;
  background-repeat: no-repeat !important;
  color: #efe6cf !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    0 2px 4px rgba(39, 28, 22, 0.18) !important;
}

.sticky.w-full.top-0 .MuiIconButton-root:hover,
.sticky.w-full.top-0 button:has(.lucide-clock8):hover,
.sticky.w-full.top-0 button:has(.lucide-clock-8):hover,
.sticky.w-full.top-0 button:has(.lucide-music2):hover,
.sticky.w-full.top-0 button:has(.lucide-music-2):hover,
.sticky.w-full.top-0 button:has(.lucide-bell):hover,
.sticky.w-full.top-0 button:has(.lucide-globe):hover,
#header-setting-button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.sticky.w-full.top-0 .MuiIconButton-root:active,
.sticky.w-full.top-0 button:active,
#header-setting-button:active {
  transform: translateY(1px);
  filter: brightness(0.93);
}

/* ---------- 玩家气泡与 AI 回复外壳 ---------- */
#customized-question-avatar {
  border: 1px solid rgba(91, 69, 43, 0.46) !important;
  border-radius: 2px !important;
  background:
    var(--shiomi-native-paper) center / 220px auto repeat,
    var(--shiomi-native-paper-light) !important;
  box-shadow: 0 3px 6px rgba(47, 36, 28, 0.13) !important;
}

#customized-question-content {
  border: 1px solid rgba(91, 69, 43, 0.44) !important;
  border-left: 3px solid var(--shiomi-native-green) !important;
  border-radius: 2px !important;
  background:
    var(--shiomi-native-paper) center / 360px auto repeat,
    rgba(241, 234, 216, 0.92) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.4),
    2px 3px 0 rgba(62, 48, 34, 0.08) !important;
  color: var(--shiomi-native-ink) !important;
}

#customized-answer-content {
  background: transparent !important;
}

#customized-answer-content > .absolute,
#customized-question-content > .absolute {
  opacity: 0.5;
}

/* ---------- 输入区 ---------- */
.bg-gradient-to-t.from-white.via-white.to-transparent.absolute.w-full.bottom-0.left-0.right-0:has(#ai-chat-input) {
  border-top: 1px solid rgba(48, 37, 32, 0.42) !important;
  padding-top: 9px !important;
  background:
    linear-gradient(180deg, rgba(232, 226, 203, 0), rgba(72, 56, 43, 0.34) 28px, rgba(48, 37, 32, 0.92)),
    var(--shiomi-native-paper) center / 420px auto repeat !important;
}

.relative.mt-2:has(#ai-chat-input) {
  display: grid !important;
  grid-template-rows: auto 32px auto !important;
  gap: 6px !important;
  border: 1px solid rgba(155, 119, 63, 0.52) !important;
  border-radius: 2px !important;
  padding: 8px !important;
  background:
    linear-gradient(180deg, rgba(83, 61, 42, 0.92), rgba(43, 32, 27, 0.96)),
    var(--shiomi-native-plate) center / 100% 100% no-repeat,
    #302520 !important;
  box-shadow:
    inset 0 1px rgba(255, 239, 201, 0.16),
    0 -5px 13px rgba(31, 23, 19, 0.25) !important;
}

.relative.mt-2:has(#ai-chat-input) > :not(.bg-white.border-\[1\.5px\]) {
  align-self: center;
}

#customized-pagination {
  position: relative !important;
  min-height: 28px !important;
  border: 1px solid rgba(155, 119, 63, 0.42) !important;
  border-radius: 1px !important;
  padding: 2px 8px 2px 56px !important;
  background:
    linear-gradient(180deg, rgba(241, 234, 216, 0.94), rgba(216, 198, 158, 0.82)),
    var(--shiomi-native-paper) center / 300px auto repeat !important;
  color: var(--shiomi-native-ink) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.36) !important;
}

#customized-pagination::before {
  content: "客帖";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  border-right: 1px solid rgba(91, 69, 43, 0.38);
  padding-right: 8px;
  color: var(--shiomi-native-red);
  font-family: var(--shiomi-native-kai);
  font-size: 12px;
  font-weight: 700;
}

#customized-pagination > div {
  min-height: 22px !important;
  gap: 6px !important;
  color: var(--shiomi-native-ink) !important;
}

#customized-pagination span {
  color: var(--shiomi-native-muted) !important;
  font-family: var(--shiomi-native-kai) !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

#customized-pagination span::after {
  color: var(--shiomi-native-muted);
  font-size: 12px;
}

#customized-pagination span:first-of-type::after {
  content: "至";
}

#customized-pagination span:last-of-type::after {
  content: "頁";
}

#customized-pagination input[aria-label="pagination"] {
  width: 36px !important;
  height: 22px !important;
  border: 1px solid rgba(91, 69, 43, 0.42) !important;
  border-radius: 1px !important;
  padding: 0 4px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: var(--shiomi-native-ink) !important;
  font-family: var(--shiomi-native-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#customized-pagination button {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border: 1px solid rgba(91, 69, 43, 0.42) !important;
  border-radius: 1px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(109, 81, 43, 0.18)) !important;
  color: var(--shiomi-native-wood) !important;
}

#ai-mod-button2 {
  width: 100% !important;
  min-height: 32px !important;
  border: 1px solid rgba(22, 16, 13, 0.72) !important;
  border-radius: 1px !important;
  padding: 3px 4px !important;
  gap: 5px !important;
  background:
    linear-gradient(180deg, rgba(25, 18, 15, 0.48), rgba(255, 242, 202, 0.06)),
    rgba(24, 18, 15, 0.46) !important;
  box-shadow: inset 0 1px rgba(255, 239, 201, 0.12) !important;
  scrollbar-width: thin;
}

#ai-mod-button,
#customized-ai-summary-button,
#customized-prompt-debug-button,
#customized-flow-button,
#customized-comment-button,
#customized-more-button,
#toggle-sub-buttons {
  height: 28px !important;
  min-width: 30px !important;
  border: 1px solid rgba(91, 69, 43, 0.5) !important;
  border-radius: 1px !important;
  padding: 0 8px !important;
  background-image:
    var(--shiomi-native-plate),
    linear-gradient(180deg, #47342b, #2c211c) !important;
  background-position: center, center !important;
  background-size: 100% 100%, auto !important;
  background-repeat: no-repeat !important;
  color: #eee2c9 !important;
  font-family: var(--shiomi-native-kai) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    0 2px 4px rgba(47, 36, 28, 0.14) !important;
}

#ai-mod-button *,
#customized-ai-summary-button *,
#customized-prompt-debug-button *,
#customized-flow-button *,
#customized-comment-button *,
#customized-scroll-to-bottom-button *,
#customized-more-button *,
#toggle-sub-buttons * {
  font-size: 0 !important;
}

#ai-mod-button::after,
#customized-ai-summary-button::after,
#customized-prompt-debug-button::after,
#customized-flow-button::after,
#customized-comment-button::after,
#customized-scroll-to-bottom-button::after,
#customized-more-button::after,
#toggle-sub-buttons::after {
  display: block;
  color: #eee2c9;
  font-family: var(--shiomi-native-kai);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(22, 12, 8, 0.85);
}

#ai-mod-button::after { content: "仕度"; }
#customized-ai-summary-button::after { content: "覚"; }
#customized-prompt-debug-button::after { content: "検"; }
#customized-flow-button::after { content: "流"; }
#customized-comment-button::after { content: "帖"; }
#customized-scroll-to-bottom-button::after { content: "下"; }
#customized-more-button::after { content: "余"; }
#toggle-sub-buttons::after { content: "收具"; }

#ai-mod-button,
#toggle-sub-buttons {
  min-width: auto !important;
  width: auto !important;
  padding: 0 10px !important;
  color: #f2e8d2 !important;
  font-size: 0 !important;
  font-weight: 700 !important;
}

#customized-ai-summary-button,
#customized-prompt-debug-button,
#customized-flow-button,
#customized-comment-button,
#customized-more-button {
  width: 30px !important;
  padding: 0 !important;
}

#ai-mod-button:hover,
#customized-ai-summary-button:hover,
#customized-prompt-debug-button:hover,
#customized-flow-button:hover,
#customized-comment-button:hover,
#customized-more-button:hover,
#toggle-sub-buttons:hover {
  border-color: rgba(155, 119, 63, 0.78) !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#ai-mod-button:active,
#customized-ai-summary-button:active,
#customized-prompt-debug-button:active,
#customized-flow-button:active,
#customized-comment-button:active,
#customized-more-button:active,
#toggle-sub-buttons:active {
  transform: translateY(1px);
  filter: brightness(0.92);
}

#customized-scroll-to-bottom-button {
  width: 30px !important;
  min-width: 30px !important;
  height: 28px !important;
  border: 1px solid rgba(91, 69, 43, 0.54) !important;
  border-radius: 1px !important;
  padding: 0 !important;
  background-image:
    var(--shiomi-native-plate),
    linear-gradient(180deg, #62452b, #34261c) !important;
  background-position: center, center !important;
  background-size: 100% 100%, auto !important;
  background-repeat: no-repeat !important;
  color: #f0e4cb !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    0 2px 4px rgba(47, 36, 28, 0.14) !important;
}

.bg-white.border-\[1\.5px\].border-gray-200.border-grey-300.relative.rounded-xl.mb-2:has(#ai-chat-input) {
  border: 1px solid rgba(81, 62, 40, 0.56) !important;
  border-radius: 1px !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 235, 0.62), rgba(222, 205, 169, 0.18)),
    var(--shiomi-native-paper) center / 420px auto repeat !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    0 -4px 12px rgba(47, 36, 28, 0.12) !important;
}

.bg-white.border-\[1\.5px\].border-gray-200.border-grey-300.relative.rounded-xl.mb-2:has(#ai-chat-input) .absolute.bottom-2.right-2.flex.items-center {
  height: 30px !important;
  border: 1px solid rgba(91, 69, 43, 0.46) !important;
  border-radius: 1px !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 235, 0.56), rgba(207, 187, 145, 0.2)),
    var(--shiomi-native-paper) center / 240px auto repeat !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3) !important;
}

.bg-white.border-\[1\.5px\].border-gray-200.border-grey-300.relative.rounded-xl.mb-2:has(#ai-chat-input) .absolute.bottom-2.right-2 .bg-gray-100 {
  height: 20px !important;
  min-width: 18px !important;
  border: 1px solid rgba(91, 69, 43, 0.22) !important;
  border-radius: 1px !important;
  background: rgba(255, 255, 255, 0.24) !important;
  color: var(--shiomi-native-muted) !important;
  font-variant-numeric: tabular-nums;
}

#ai-send-button {
  width: 30px !important;
  height: 28px !important;
  border-radius: 1px !important;
  background:
    linear-gradient(180deg, #8d2c1f, #63180f) !important;
  color: #f4ead7 !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(47, 36, 28, 0.16) !important;
}

#ai-send-button:hover {
  background:
    linear-gradient(180deg, #9a3323, #711c12) !important;
}

#ai-send-button:active {
  transform: translateY(1px);
  filter: brightness(0.92);
}

#ai-chat-input,
textarea.rc-textarea {
  color: var(--shiomi-native-ink) !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  caret-color: var(--shiomi-native-red) !important;
}

#ai-chat-input::placeholder,
textarea.rc-textarea::placeholder {
  color: rgba(81, 69, 56, 0.58) !important;
}

button:has(svg[data-icon="Send03"]),
[role="button"]:has(svg[data-icon="Send03"]),
div[data-state="closed"]:has(svg[data-icon="Send03"]) {
  min-width: 34px !important;
  width: 34px !important;
  height: 30px !important;
  border: 1px solid rgba(99, 32, 24, 0.72) !important;
  border-radius: 1px !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, #8a2a1c, #64170f) !important;
  color: #f4ead7 !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(47, 36, 28, 0.16) !important;
}

button:has(svg[data-icon="Send03"]):hover,
[role="button"]:has(svg[data-icon="Send03"]):hover,
div[data-state="closed"]:has(svg[data-icon="Send03"]):hover {
  filter: brightness(1.06);
}

button:has(svg[data-icon="Send03"]):active,
[role="button"]:has(svg[data-icon="Send03"]):active,
div[data-state="closed"]:has(svg[data-icon="Send03"]):active {
  transform: translateY(1px);
  filter: brightness(0.92);
}

/* ---------- 原生按钮与消息操作工具轨 ---------- */
button:not(.MuiButtonBase-root):not(.sm *):not(summary),
[role="button"]:not(.MuiButtonBase-root):not(.sm *) {
  border-radius: 1px !important;
  letter-spacing: 0 !important;
}

#customized-question-content .MuiStack-root:has([id^="customized-"]),
#customized-answer-content .MuiStack-root:has([id^="customized-"]),
.chat-answer-container .MuiStack-root:has([id^="customized-"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  width: auto !important;
  max-width: 100% !important;
  margin-top: 7px !important;
  border: 1px solid rgba(91, 69, 43, 0.32) !important;
  border-radius: 1px !important;
  padding: 3px 4px !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 235, 0.52), rgba(221, 203, 166, 0.22)),
    var(--shiomi-native-paper) center / 280px auto repeat !important;
  opacity: 0.58;
  transition: opacity 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

#customized-question-content:hover .MuiStack-root:has([id^="customized-"]),
#customized-answer-content:hover .MuiStack-root:has([id^="customized-"]),
.chat-answer-container:hover .MuiStack-root:has([id^="customized-"]),
#customized-question-content .MuiStack-root:has([id^="customized-"]):focus-within,
#customized-answer-content .MuiStack-root:has([id^="customized-"]):focus-within,
.chat-answer-container .MuiStack-root:has([id^="customized-"]):focus-within {
  border-color: rgba(91, 69, 43, 0.56) !important;
  box-shadow: 0 2px 5px rgba(47, 36, 28, 0.12) !important;
  opacity: 1;
}

[id^="customized-"].MuiButtonBase-root,
.MuiButtonBase-root[id^="customized-"],
#customized-question-content .MuiButton-root,
#customized-answer-content .MuiButton-root,
.chat-answer-container .MuiButton-root {
  min-width: 26px !important;
  width: 26px !important;
  height: 24px !important;
  border: 1px solid rgba(91, 69, 43, 0.42) !important;
  border-radius: 3px !important;
  padding: 0 !important;
  background-image:
    var(--shiomi-native-plate),
    linear-gradient(180deg, #46332b, #2a201c) !important;
  background-position: center, center !important;
  background-size: 100% 100%, auto !important;
  background-repeat: no-repeat !important;
  color: #eee2c9 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16) !important;
}

[id^="customized-"].MuiButtonBase-root svg,
.MuiButtonBase-root[id^="customized-"] svg,
#customized-question-content .MuiButton-root svg,
#customized-answer-content .MuiButton-root svg,
.chat-answer-container .MuiButton-root svg {
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
}

[id^="customized-"].MuiButtonBase-root:hover,
.MuiButtonBase-root[id^="customized-"]:hover,
#customized-question-content .MuiButton-root:hover,
#customized-answer-content .MuiButton-root:hover,
.chat-answer-container .MuiButton-root:hover {
  border-color: rgba(155, 119, 63, 0.74) !important;
  filter: brightness(1.07);
}

#customized-delete-button {
  color: #f1d9c7 !important;
  background-image:
    var(--shiomi-native-plate),
    linear-gradient(180deg, #7c2419, #4d160f) !important;
}

/* ---------- 评论抽屉、批量操作与弹窗 ---------- */
.w-full.bottom-0.z-20.inset-x-0.bg-white,
.chat-container > .w-full.bottom-0.z-20.inset-x-0.bg-background,
.MuiCollapse-root.MuiCollapse-vertical.fixed.w-full.bottom-0.z-30.bg-white,
.MuiDrawer-root .MuiPaper-root,
.MuiDialog-root .MuiPaper-root,
.MuiPopover-root .MuiPaper-root {
  border-color: rgba(81, 62, 40, 0.5) !important;
  border-radius: 2px 2px 0 0 !important;
  background:
    var(--shiomi-native-paper) center / 420px auto repeat,
    var(--shiomi-native-paper-color) !important;
  box-shadow:
    0 -8px 18px rgba(47, 36, 28, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.38) !important;
  color: var(--shiomi-native-ink) !important;
}

.MuiDialog-root .MuiPaper-root,
.MuiPopover-root .MuiPaper-root {
  border: 1px solid rgba(81, 62, 40, 0.5) !important;
  border-radius: 2px !important;
}

.MuiBackdrop-root,
.MuiModal-backdrop {
  background-color: rgba(31, 24, 20, 0.42) !important;
  backdrop-filter: blur(2px);
}

.MuiButton-root.MuiButton-outlined,
.MuiButton-root.MuiButton-text,
.MuiButton-root.MuiButton-contained {
  border-radius: 1px !important;
  letter-spacing: 0 !important;
  font-family: var(--shiomi-native-kai) !important;
  text-transform: none !important;
}

.MuiButton-root.MuiButton-outlined {
  border-color: rgba(91, 69, 43, 0.5) !important;
  color: var(--shiomi-native-ink) !important;
  background:
    rgba(255, 255, 255, 0.22),
    var(--shiomi-native-paper) center / 300px auto repeat !important;
}

.MuiButton-root.MuiButton-contained,
.MuiButton-root.MuiButton-containedPrimary,
.MuiButton-root.MuiButton-contained.MuiButton-colorPrimary {
  border: 1px solid rgba(99, 32, 24, 0.66) !important;
  background:
    linear-gradient(180deg, #8a2a1c, #64170f) !important;
  color: #f4ead7 !important;
}

.MuiButton-root.MuiButton-colorWarning,
.MuiButton-root.MuiButton-outlinedWarning {
  border-color: rgba(124, 25, 15, 0.62) !important;
  color: var(--shiomi-native-red) !important;
}

.MuiDivider-root {
  border-color: rgba(82, 63, 43, 0.28) !important;
}

.MuiRating-iconFilled,
.MuiRating-iconHover {
  color: var(--shiomi-native-brass) !important;
}

.MuiRating-iconEmpty {
  color: rgba(91, 69, 43, 0.32) !important;
}

/* ---------- 加载状态 ---------- */
[class*="dot-flashing"],
[class*="dot_flashing"],
.style_dot-flashing__8L91Q {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 78px !important;
  height: 24px !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

[class*="dot-flashing"]::before,
[class*="dot_flashing"]::before,
.style_dot-flashing__8L91Q::before {
  content: "" !important;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  border: 1px solid rgba(91, 69, 43, 0.72);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255, 235, 180, 0.28), transparent 45%),
    #7c190f;
  box-shadow:
    18px 0 0 -5px rgba(124, 25, 15, 0.45),
    30px 0 0 -5px rgba(155, 119, 63, 0.42),
    42px 0 0 -5px rgba(101, 115, 92, 0.42);
  transform-origin: 50% 60%;
  animation: shiomi-native-seal 920ms steps(4, end) infinite;
}

[class*="dot-flashing"]::after,
[class*="dot_flashing"]::after,
.style_dot-flashing__8L91Q::after {
  content: "斟酌中" !important;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--shiomi-native-muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

[class*="loading"],
[class*="typing"],
[class*="animate-pulse"] {
  color: var(--shiomi-native-muted) !important;
}

.style_text__zGhNq,
[class*="loading"] + span,
[class*="dot-flashing"] + span,
[class*="dot_flashing"] + span {
  color: var(--shiomi-native-muted) !important;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0 !important;
}

@keyframes shiomi-native-seal {
  0% {
    opacity: 0.62;
    transform: translateY(-1px) rotate(-4deg);
    box-shadow:
      18px 0 0 -5px rgba(124, 25, 15, 0.18),
      30px 0 0 -5px rgba(155, 119, 63, 0.18),
      42px 0 0 -5px rgba(101, 115, 92, 0.18);
  }
  35% {
    opacity: 1;
    transform: translateY(1px) rotate(3deg);
    box-shadow:
      18px 0 0 -5px rgba(124, 25, 15, 0.72),
      30px 0 0 -5px rgba(155, 119, 63, 0.32),
      42px 0 0 -5px rgba(101, 115, 92, 0.18);
  }
  68% {
    opacity: 0.92;
    transform: translateY(0) rotate(0deg);
    box-shadow:
      18px 0 0 -5px rgba(124, 25, 15, 0.42),
      30px 0 0 -5px rgba(155, 119, 63, 0.72),
      42px 0 0 -5px rgba(101, 115, 92, 0.28);
  }
  100% {
    opacity: 0.72;
    transform: translateY(-1px) rotate(-4deg);
    box-shadow:
      18px 0 0 -5px rgba(124, 25, 15, 0.28),
      30px 0 0 -5px rgba(155, 119, 63, 0.38),
      42px 0 0 -5px rgba(101, 115, 92, 0.72);
  }
}

/* ---------- 可访问焦点 ---------- */
button:focus-visible,
[role="button"]:focus-visible,
.MuiButtonBase-root:focus-visible,
#ai-model-selector:focus-visible,
#ai-chat-input:focus-visible {
  outline: 2px solid #b38b49 !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .sticky.w-full.top-0 .MuiIconButton-root,
  .sticky.w-full.top-0 button,
  #header-setting-button,
  #customized-question-content .MuiStack-root,
  #customized-answer-content .MuiStack-root,
  .chat-answer-container .MuiStack-root {
    transition: none !important;
  }
}.si {
  box-sizing: border-box;
  width: min(720px, calc(100% - 24px));
  margin: 18px auto 28px;
  border: 1px solid #9b773f;
  border-top: 8px solid #302520;
  padding: 0;
  overflow: hidden;
  background: #e8e2cb !important;
  color: #292620 !important;
  color-scheme: light;
  box-shadow: 0 12px 24px rgba(32, 22, 18, 0.22), inset 0 0 0 3px rgba(155, 119, 63, 0.2);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0;
  text-align: left;
  word-break: break-word;
}

.si,
.si * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.si > header {
  border-bottom: 1px solid rgba(155, 119, 63, 0.58);
  padding: 18px 24px 15px;
  background: #302520 !important;
  color: #f1ead8 !important;
}

.si > header small {
  display: block;
  margin-bottom: 4px;
  color: #c7a96b !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 700;
}

.si > header h2 {
  margin: 0;
  color: #f1ead8 !important;
  font-size: 23px;
  line-height: 1.3;
}

.si > header p {
  margin: 5px 0 0;
  color: #d9ceb5 !important;
  font-size: 11px;
}

.si > section {
  padding: 18px 24px;
  background: #e8e2cb !important;
}

.si > section + section {
  border-top: 1px solid rgba(117, 111, 98, 0.34);
}

.si h3 {
  margin: 0 0 10px;
  color: #7c190f !important;
  font-size: 15px;
  line-height: 1.4;
}

.si pre {
  margin: 0;
  border: 1px solid rgba(114, 84, 39, 0.72);
  padding: 0 14px 14px;
  overflow-x: auto;
  white-space: pre-wrap;
  background: #f1ead8 !important;
  color: #292620 !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
  font-size: 12px;
  line-height: 1.65;
  user-select: text;
}

.si pre::before {
  content: "请复制下方 <Player_Info> 全文，并粘贴到系统提示词末尾";
  display: block;
  margin: 0 -14px 12px;
  border-bottom: 1px solid #9b773f;
  padding: 8px 12px;
  background: #7c190f !important;
  color: #fff4dc !important;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.si dl {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid rgba(117, 111, 98, 0.34);
}

.si dt,
.si dd {
  margin: 0;
  border-bottom: 1px solid rgba(117, 111, 98, 0.34);
  padding: 8px 6px;
}

.si dt {
  color: #756f62 !important;
  font-size: 11px;
  font-weight: 700;
}

.si dd {
  color: #292620 !important;
  font-size: 13px;
}

.si > section > p {
  margin: 0 0 12px;
}

.si > .si-n {
  background: #f1ead8 !important;
}

.si > .si-n > p {
  margin: 0;
  color: #393229 !important;
  line-height: 1.9;
  text-indent: 2em;
}

.si > .si-n > p::first-letter {
  color: #7c190f !important;
  font-size: 1.35em;
  font-weight: 700;
}

.si ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: start-choice;
}

.si li {
  counter-increment: start-choice;
  display: grid;
  grid-template-columns: 28px 92px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border-bottom: 1px solid rgba(117, 111, 98, 0.34);
  padding: 8px 0;
}

.si li::before {
  content: counter(start-choice);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #9b773f;
  background: #302520 !important;
  color: #f1ead8 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.si li strong {
  color: #393229 !important;
  font-size: 12px;
}

.si li span {
  color: #5f574b !important;
  font-size: 12px;
}

.si > footer {
  border-top: 1px solid #9b773f;
  padding: 10px 24px;
  background: #302520 !important;
  color: #d9ceb5 !important;
  font-size: 11px;
  text-align: center;
}

@media (max-width: 560px) {
  .si {
    width: calc(100% - 16px);
    margin: 10px 8px 18px;
    font-size: 14px;
  }

  .si > header,
  .si > section {
    padding-right: 14px;
    padding-left: 14px;
  }

  .si > header h2 {
    font-size: 20px;
  }

  .si pre {
    font-size: 11px;
  }

  .si dl {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .si li {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 5px 7px;
  }

  .si li strong {
    grid-column: 2;
  }

  .si li span {
    grid-column: 2;
  }
}

/* ---------- RiliChat 原生外壳适配 ----------
   本段只命中 RiliChat 聊天页的稳定锚点：#conversation / #prompt-input。
   不会改写上方 AI 风月平台的旧选择器。
*/
body:has(#conversation) {
  --rili-shiomi-paper: url("https://i.postimg.cc/fT3wN9ct/zhi-zhi-di.png");
  --rili-shiomi-scene: url("https://i.postimg.cc/XvrRHRDT/dock-day.png");
  --rili-shiomi-wood: #302520;
  --rili-shiomi-paper-color: #e8e2cb;
  --rili-shiomi-paper-light: #f2ecd9;
  --rili-shiomi-ink: #292620;
  --rili-shiomi-muted: #756f62;
  --rili-shiomi-brass: #9b773f;
  --rili-shiomi-red: #7c190f;
  --rili-shiomi-green: #65735c;
}

/* ---------- 左侧导航和顶栏 ---------- */
body:has(#conversation) [data-sidebar="sidebar"] {
  border-right-color: rgba(114, 84, 39, 0.64) !important;
  background:
    var(--rili-shiomi-paper) center / 420px auto repeat,
    var(--rili-shiomi-paper-color) !important;
  color: var(--rili-shiomi-ink) !important;
}

body:has(#conversation) [data-sidebar="header"] {
  border-bottom-color: rgba(114, 84, 39, 0.46) !important;
}

body:has(#conversation) [data-sidebar="menu-button"] {
  border-radius: 2px !important;
  color: var(--rili-shiomi-ink) !important;
  font-family: var(--shiomi-native-kai, "Kaiti SC", KaiTi, serif) !important;
}

body:has(#conversation) [data-sidebar="menu-button"][data-active="true"],
body:has(#conversation) [data-sidebar="menu-button"]:hover {
  background: rgba(124, 25, 15, 0.1) !important;
  color: var(--rili-shiomi-red) !important;
}

body:has(#conversation) nav:has(#nav-left):has(#nav-middle) {
  border-bottom: 1px solid rgba(114, 84, 39, 0.6) !important;
  background:
    var(--rili-shiomi-paper) center / 360px auto repeat,
    var(--rili-shiomi-paper-light) !important;
  box-shadow: 0 3px 10px rgba(47, 36, 28, 0.18) !important;
  color: var(--rili-shiomi-ink) !important;
}

body:has(#conversation) nav:has(#nav-left) button {
  border-radius: 2px !important;
  color: var(--rili-shiomi-wood) !important;
}

body:has(#conversation) nav:has(#nav-left) button:hover {
  background: rgba(124, 25, 15, 0.1) !important;
  color: var(--rili-shiomi-red) !important;
}

/* ---------- 对话画布和消息壳 ---------- */
body:has(#conversation) .flex-1.bg-background:has(#conversation) {
  background-color: #211b18 !important;
}

#conversation {
  isolation: isolate;
  background: var(--rili-shiomi-scene) center / cover fixed !important;
  color: var(--rili-shiomi-ink) !important;
  scrollbar-color: #817255 rgba(47, 36, 28, 0.28);
  scrollbar-width: thin;
}

#conversation::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    var(--rili-shiomi-paper) center / 420px auto repeat,
    rgba(43, 32, 24, 0.52);
  background-blend-mode: soft-light;
  opacity: 0.86;
}

#conversation > div:has(.is-assistant) {
  position: relative;
  z-index: 1;
  padding-bottom: 156px !important;
}

#conversation::-webkit-scrollbar {
  width: 8px;
}

#conversation::-webkit-scrollbar-track {
  background: rgba(47, 36, 28, 0.34);
}

#conversation::-webkit-scrollbar-thumb {
  border: 2px solid rgba(232, 226, 203, 0.64);
  background: #817255;
}

/* RiliChat 原先将每条消息限制为 max-w-2xl，并为助手套上气泡。
   解除这两层后，.sm 的容器查询才能按实际对话栏宽度工作。 */
#conversation .w-full.max-w-2xl:has(.is-assistant),
#conversation .w-full.max-w-2xl:has(.is-user) {
  max-width: 1120px !important;
  padding-right: 24px !important;
  padding-left: 24px !important;
}

#conversation .group.is-assistant {
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
}

#conversation .group.is-assistant > .border {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#conversation .group.is-assistant .rili-markdown-renderer {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  flex-direction: column;
  align-items: center;
  container-type: inline-size;
}

#conversation .group.is-assistant .rili-markdown-renderer > .sm {
  flex: 0 0 auto;
}

#conversation .group.is-assistant > .flex.items-center.justify-between {
  width: min(100%, 904px) !important;
  margin: 5px auto 0 !important;
  padding: 0 6px !important;
}

#conversation .group.is-assistant > .flex.items-center.justify-between button {
  min-width: 28px !important;
  min-height: 24px !important;
  border: 1px solid rgba(91, 69, 43, 0.48) !important;
  border-radius: 2px !important;
  padding: 0 7px !important;
  background:
    var(--rili-shiomi-paper) center / 220px auto repeat,
    var(--rili-shiomi-paper-light) !important;
  color: var(--rili-shiomi-ink) !important;
  font-family: var(--shiomi-native-kai, "Kaiti SC", KaiTi, serif) !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#conversation .group.is-assistant > .flex.items-center.justify-between button:hover {
  border-color: rgba(124, 25, 15, 0.7) !important;
  color: var(--rili-shiomi-red) !important;
}

#conversation .group.is-user > .border {
  border: 1px solid rgba(101, 115, 92, 0.64) !important;
  border-radius: 2px !important;
  background:
    var(--rili-shiomi-paper) center / 300px auto repeat,
    rgba(226, 235, 216, 0.92) !important;
  color: var(--rili-shiomi-ink) !important;
  box-shadow: 2px 3px 0 rgba(47, 36, 28, 0.1) !important;
}

/* ---------- 固定输入区 ---------- */
#prompt-input {
  box-sizing: border-box;
  border: 1px solid rgba(155, 119, 63, 0.72) !important;
  border-radius: 2px !important;
  padding: 4px !important;
  background:
    var(--rili-shiomi-paper) center / 360px auto repeat,
    var(--rili-shiomi-paper-color) !important;
  box-shadow:
    0 -5px 16px rgba(31, 23, 19, 0.32),
    inset 0 0 0 1px rgba(255, 249, 232, 0.52) !important;
}

#prompt-input [data-slot="input-group"] {
  min-height: 132px !important;
  border: 1px solid rgba(91, 69, 43, 0.62) !important;
  border-radius: 1px !important;
  background: rgba(255, 251, 239, 0.58) !important;
  box-shadow: inset 0 0 0 1px rgba(114, 84, 39, 0.16) !important;
}

#prompt-input [data-slot="input-group"]:focus-within {
  border-color: var(--rili-shiomi-red) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124, 25, 15, 0.18),
    0 0 0 2px rgba(155, 119, 63, 0.22) !important;
}

#prompt-input-header,
#prompt-input-footer {
  color: var(--rili-shiomi-muted) !important;
}

#prompt-input-header {
  border-bottom: 1px solid rgba(114, 84, 39, 0.3) !important;
  background: rgba(91, 69, 43, 0.07) !important;
}

#prompt-input-footer {
  border-top: 1px solid rgba(114, 84, 39, 0.3) !important;
}

#prompt-input textarea,
#prompt-input [data-slot="input-group-control"] {
  min-height: 58px !important;
  padding: 9px 12px !important;
  background: transparent !important;
  color: var(--rili-shiomi-ink) !important;
  caret-color: var(--rili-shiomi-red) !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

#prompt-input textarea::placeholder {
  color: rgba(81, 69, 56, 0.66) !important;
}

#prompt-input button {
  min-height: 26px !important;
  border: 1px solid rgba(91, 69, 43, 0.5) !important;
  border-radius: 2px !important;
  background:
    var(--rili-shiomi-paper) center / 220px auto repeat,
    var(--rili-shiomi-paper-light) !important;
  color: var(--rili-shiomi-ink) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.48) !important;
}

#prompt-input button:hover {
  border-color: rgba(124, 25, 15, 0.66) !important;
  color: var(--rili-shiomi-red) !important;
}

#prompt-input button[aria-label="发送"],
#prompt-input button[data-size="icon-sm"] {
  border-color: rgba(99, 32, 24, 0.78) !important;
  background: linear-gradient(180deg, #8a2a1c, #64170f) !important;
  color: #f4ead7 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.25) !important;
}

#prompt-input button[aria-label="发送"]:hover,
#prompt-input button[data-size="icon-sm"]:hover {
  color: #fff4dc !important;
  filter: brightness(1.07);
}

@media (max-width: 680px) {
  #conversation .w-full.max-w-2xl:has(.is-assistant),
  #conversation .w-full.max-w-2xl:has(.is-user) {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  #prompt-input {
    padding: 3px !important;
  }

  #prompt-input [data-slot="input-group"] {
    min-height: 122px !important;
  }

  #prompt-input textarea,
  #prompt-input [data-slot="input-group-control"] {
    min-height: 52px !important;
  }
}