:root{
  --bg:#100e0c;
  --bg-2:#16120f;
  --panel:#171310;
  --line:#2b241d;
  --line-soft:#231d17;
  --ink:#ece4d6;
  --ink-dim:#9a8c78;
  --ink-faint:#6a5f51;
  --gold:#d2b077;
  --gold-deep:#a8854e;
  --gold-soft:rgba(210,176,119,.16);
  --seal:#a8402f;
  --me:#2a2117;
  --you:#1a1613;
  --radius:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  touch-action:manipulation;
}

body{height:100%}

/* 国产手机浏览器那点脾气：别放大字、别双击缩放、别弹原生菜单 */
input,textarea,select{font-size:16px!important}
button{-webkit-appearance:none;appearance:none}
img,svg{-webkit-user-drag:none;user-select:none}
body{
  -webkit-touch-callout:none;
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-smoothing:antialiased;
}

body{
  margin:0;
  color:var(--ink);
  font:400 15px/1.68 "Songti SC","Noto Serif CJK SC","Source Han Serif SC",Georgia,serif;
  overflow:hidden;
  overscroll-behavior:none;
  background:
    radial-gradient(75% 45% at 50% -8%,#2a2118 0%,rgba(42,33,24,0) 70%),
    radial-gradient(60% 40% at 100% 100%,#1c1712 0%,rgba(28,23,18,0) 65%),
    linear-gradient(180deg,#131009 0%,var(--bg) 45%,#0c0a08 100%);
}
/* 远处几重山 */
body::after{
  content:'';position:fixed;left:0;right:0;bottom:0;height:44vh;pointer-events:none;z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='520' viewBox='0 0 1200 520' preserveAspectRatio='none'%3E%3Cpath d='M0 380 Q150 300 300 352 T620 322 T960 360 T1200 328 V520 H0 Z' fill='%231e1813' fill-opacity='0.55'/%3E%3Cpath d='M0 430 Q180 372 360 412 T740 386 T1080 420 T1200 402 V520 H0 Z' fill='%23171310' fill-opacity='0.75'/%3E%3C/svg%3E") bottom center/100% 100% no-repeat;
  opacity:.9;
}
/* 缁嗗櫔鐐癸紝鍒お浜?*/
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.hidden{display:none!important}
button,input,textarea,select{font-family:inherit;color:inherit}
::selection{background:rgba(210,176,119,.28)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2e271f;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#3d3327}

/* ================= 閿?================= */
.lock{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:50;
  background:
    radial-gradient(46% 34% at 50% 34%,rgba(210,176,119,.10) 0%,rgba(210,176,119,0) 70%),
    radial-gradient(90% 70% at 50% 20%,#1e1813 0%,#0b0908 100%);
}
.lock-card{
  position:relative;
  width:min(86vw,326px);text-align:center;padding-bottom:6vh;
  animation:rise .5s cubic-bezier(.2,.8,.3,1) both;
}
.lock-card::before{
  content:'';position:absolute;left:50%;top:50%;width:300px;height:300px;
  margin:-170px 0 0 -150px;border-radius:50%;pointer-events:none;z-index:0;
  border:1px solid rgba(210,176,119,.07);
  box-shadow:0 0 0 26px rgba(210,176,119,.018),inset 0 0 60px rgba(210,176,119,.03);
}
.lock-card > *{position:relative;z-index:1}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lock-mark{
  font-size:46px;letter-spacing:8px;color:var(--gold);
  text-shadow:0 0 30px rgba(210,176,119,.45),0 0 2px rgba(210,176,119,.8);
  margin-bottom:6px;
}
.lock-mark::after{
  content:'';display:block;width:38px;height:1px;margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);
}
.lock-tip{
  color:var(--ink-dim);font-size:12.5px;letter-spacing:3px;
  margin:16px 0 16px;min-height:20px;transition:color .2s;
}
.lock-dots{display:flex;gap:13px;justify-content:center;margin-bottom:26px;height:11px}
.dot{
  width:9px;height:9px;border-radius:50%;
  background:#2f2821;box-shadow:inset 0 0 0 1px #3a3128;transition:.2s;
}
.dot.on{
  background:radial-gradient(circle at 35% 30%,#f0d9a6,var(--gold-deep));
  box-shadow:0 0 12px rgba(210,176,119,.75);transform:scale(1.18);
}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.key{
  height:57px;border:1px solid var(--line);border-radius:14px;font-size:19px;letter-spacing:1px;
  background:linear-gradient(165deg,#1c1712,#141110);
  box-shadow:inset 0 1px 0 rgba(210,176,119,.07),0 2px 6px rgba(0,0,0,.4);
  transition:transform .1s,background .15s,border-color .15s;
}
.key:hover{border-color:#3d3327}
.key:active{
  transform:scale(.965);border-color:var(--gold-deep);
  background:linear-gradient(165deg,#241d15,#191410);
}
.key.eq{border:0;background:transparent;box-shadow:none;color:var(--ink-faint);font-size:13px;letter-spacing:2px}

/* ================= 框架 ================= */
.app{
  position:relative;z-index:1;
  height:100%;
  display:flex;flex-direction:column;
  overflow:hidden;
}

.topbar{
  display:flex;align-items:center;gap:10px;
  padding:calc(11px + var(--safe-t)) 14px 11px;
  background:linear-gradient(180deg,rgba(22,18,14,.96),rgba(19,16,13,.66));
  backdrop-filter:blur(14px);
  position:relative;
  box-shadow:0 1px 0 rgba(0,0,0,.55),0 6px 22px rgba(0,0,0,.35);
}
.topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(210,176,119,.45) 22%,rgba(210,176,119,.45) 78%,transparent);
}
.brand{
  font-size:19px;letter-spacing:5px;color:var(--gold);
  text-shadow:0 0 14px rgba(210,176,119,.4);user-select:none;
  padding-left:2px;
}

/* 澶村儚 + 鍚嶅瓧 */
.who{display:flex;align-items:center;gap:8px;user-select:none;min-width:0}
.who-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.who-text b{font-size:14.5px;letter-spacing:2px;color:var(--ink);font-weight:600}
.who-text span{font-size:10px;letter-spacing:1px;color:var(--gold-deep);opacity:.85}

.avatar{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background-size:cover;background-position:center;
  font-size:0;color:transparent;user-select:none;
  box-shadow:
    0 2px 9px rgba(0,0,0,.55),
    0 0 0 1.5px rgba(12,10,8,.9),
    0 0 0 2.5px rgba(210,176,119,.34),
    0 0 14px rgba(210,176,119,.10);
}
.avatar.me{
  box-shadow:
    0 2px 9px rgba(0,0,0,.55),
    0 0 0 1.5px rgba(12,10,8,.9),
    0 0 0 2.5px rgba(120,170,166,.34),
    0 0 14px rgba(120,170,166,.10);
}
.avatar.you{background-image:url("avatar-you.png?v=3")}
.avatar.me{background-image:url("avatar-me.png?v=3")}
.tabs{
  display:flex;gap:3px;margin:0 auto;padding:3px;
  background:#151210;border:1px solid var(--line);border-radius:999px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.tab{
  border:0;background:transparent;color:var(--ink-faint);
  padding:6px 19px;border-radius:999px;font-size:13px;letter-spacing:2px;
  transition:.2s;
}
.tab.active{
  color:#1a1410;
  background:linear-gradient(165deg,#e6c98e,var(--gold-deep));
  box-shadow:0 1px 6px rgba(210,176,119,.35);
  font-weight:600;
}
.ghost{
  width:33px;height:33px;line-height:1;border-radius:11px;font-size:12px;
  border:1px solid var(--line);background:transparent;color:var(--ink-dim);
  transition:.15s;
}
.ghost:hover{border-color:#3d3327;color:var(--ink)}
.ghost:active{background:#221c16;border-color:var(--gold-deep)}

.stage{flex:1;position:relative;min-height:0}
.page{position:absolute;inset:0;display:none;min-height:0}
.page.active{display:flex;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ================= 鑱婂ぉ ================= */
/* 聊天背景：淡淡的云气、雨丝，底下压一层墨 */
#page-chat{flex-direction:column;position:relative;overflow:hidden}
#page-chat::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("chat-bg.jpg") center center/cover no-repeat;
  opacity:.92;
}
#page-chat::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,9,8,.82) 0%,rgba(11,9,8,.22) 26%,rgba(11,9,8,.30) 62%,rgba(11,9,8,.92) 100%),
    repeating-linear-gradient(104deg,rgba(255,255,255,.012) 0 1px,rgba(255,255,255,0) 1px 15px);
}
#page-chat .thread,
#page-chat .quick,
#page-chat .composer{position:relative;z-index:1}
.thread{
  flex:1;min-height:0;overflow-y:auto;padding:20px 16px 10px;
  display:flex;flex-direction:column;gap:11px;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
}
.thread::-webkit-scrollbar{width:0}

.row{width:100%;display:flex;align-items:flex-start;gap:9px}
.row.you{flex-direction:row}
.row.me{flex-direction:row-reverse}
.row.system{justify-content:center;align-items:center}
.row .col{display:flex;flex-direction:column;max-width:calc(100% - 44px);min-width:0;position:relative}
.row.me .col{align-items:flex-end}
.row.you .col{align-items:flex-start}
.row.system .col{align-items:center;max-width:100%}
.row .avatar{margin-top:2px}

.stamp{
  font-size:10px;color:#514940;letter-spacing:1px;padding:2px 7px 0;
  opacity:0;transition:opacity .2s;user-select:none;
}
.row:hover .stamp,.row:last-child .stamp{opacity:1}

.bubble{
  max-width:100%;padding:11px 15px;border-radius:var(--radius);
  font-size:15px;line-height:1.72;white-space:pre-wrap;word-break:break-word;
  animation:pop .34s cubic-bezier(.22,1.1,.36,1);cursor:default;
  position:relative;
  --tail-you:#241e16;
  --tail-me:#463723;
}
.bubble.you::before,
.bubble.me::before{
  content:'';position:absolute;top:14px;width:0;height:0;
  border:6px solid transparent;
}
.bubble.you::before{left:-10px;border-right-color:var(--tail-you)}
.bubble.me::before{right:-10px;border-left-color:var(--tail-me)}

/* 姘旀场涓婂帇涓€灞傛瀬缁嗙殑绾圭悊锛屽埆澶寒 */
.bubble.you::after,
.bubble.me::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23f)' opacity='0.09'/%3E%3C/svg%3E");
}
@keyframes pop{
  0%{opacity:0;transform:translateY(9px) scale(.93)}
  55%{opacity:1;transform:translateY(-2px) scale(1.015)}
  100%{opacity:1;transform:none}
}
.bubble:active{filter:brightness(1.14)}

.bubble.me{
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(210,176,119,.15) 0%,rgba(210,176,119,0) 55%),
    linear-gradient(155deg,#3b2f1b 0%,#2a2114 52%,#352b17 100%);
  border:1px solid #7c6030;
  color:#f6ebcf;
  border-bottom-right-radius:6px;
  box-shadow:
    0 4px 16px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(232,205,150,.24),
    inset 0 0 22px rgba(210,176,119,.07);
}
.bubble.you{
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(210,176,119,.09) 0%,rgba(210,176,119,0) 55%),
    linear-gradient(155deg,#241e16 0%,#181410 60%,#201a13 100%);
  border:1px solid #4d3d24;
  color:#f0e5cf;
  border-bottom-left-radius:6px;
  box-shadow:
    0 4px 14px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(210,176,119,.13);
}
/* 鏃堕棿鍒嗛殧 */
.timesep{display:flex;justify-content:center;width:100%;margin:10px 0 2px}
.timesep span{
  font-size:11px;letter-spacing:1px;color:#5f564a;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.045);
  padding:3px 11px;border-radius:999px;font-size:11px;letter-spacing:1px;
}

.bubble.system{
  align-self:center;background:transparent;border:0;box-shadow:none;
  color:var(--ink-faint);font-size:12px;letter-spacing:1.5px;
  max-width:90%;text-align:center;padding:2px 6px;animation:none;
}
.bubble.thinking{color:var(--ink-dim);letter-spacing:4px;animation:blink 1.1s ease-in-out infinite}
.bubble.typing{min-height:1.5em}
.bubble.typing::after{
  content:'鈻?;margin-left:2px;color:var(--gold);opacity:.75;
  animation:cursor .9s steps(2,start) infinite;
}
@keyframes cursor{0%,100%{opacity:0}50%{opacity:.9}}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}

.more-msgs{
  align-self:center;padding:5px 15px;border-radius:999px;font-size:12px;letter-spacing:1px;
  border:1px solid var(--line);background:rgba(255,255,255,.012);color:var(--ink-faint);
  margin-bottom:4px;transition:.15s;
}
.more-msgs:active{border-color:var(--gold-deep);color:var(--ink-dim)}

.quick{display:flex;gap:6px;padding:2px 16px 6px;opacity:.38;transition:opacity .25s;flex:0 0 auto}

/* 角落里那只黑猫 */
.blackcat{
  position:absolute;right:10px;bottom:118px;width:74px;height:74px;
  pointer-events:none;z-index:3;opacity:.62;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  transition:opacity .3s;
}
.blackcat svg{width:100%;height:100%;display:block;overflow:visible}
.blackcat .cat-body{
  transform-origin:50px 84px;
  animation:cat-breathe 4.2s ease-in-out infinite;
}
.blackcat .tail{
  transform-origin:71px 76px;
  animation:cat-tail 2.6s ease-in-out infinite;
}
.blackcat .eyes{
  transform-origin:50px 42px;
  animation:cat-blink 5.4s linear infinite;
}
.blackcat.jump .cat-body{animation:cat-jump .45s ease-out}
@keyframes cat-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}}
@keyframes cat-tail{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(12deg)}
}
@keyframes cat-blink{
  0%,92%,100%{transform:scaleY(1)}
  95%{transform:scaleY(.08)}
}
@keyframes cat-jump{
  0%{transform:translateY(0) scaleY(1)}
  30%{transform:translateY(-7px) scaleY(1.05)}
  60%{transform:translateY(0) scaleY(.95)}
  100%{transform:translateY(0) scaleY(1)}
}
.quick:hover{opacity:1}
.chip{
  padding:3px 11px;border-radius:999px;font-size:11px;letter-spacing:.5px;
  border:1px solid var(--line);
  background:linear-gradient(175deg,#1e1913,#141110);
  color:var(--ink-faint);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 1px 4px rgba(0,0,0,.45);
  transition:.15s;
}
.chip:hover{border-color:#3d3327;color:var(--ink-dim)}
.chip:active{background:linear-gradient(175deg,#262019,#1a1512);border-color:var(--gold-deep);color:var(--ink);box-shadow:none}

.composer{
  display:flex;gap:9px;align-items:flex-end;flex:0 0 auto;
  padding:10px 14px calc(11px + var(--safe-b));
  background:linear-gradient(180deg,rgba(16,13,11,.55),rgba(16,13,11,.94));
  backdrop-filter:blur(12px);position:relative;z-index:6;
}
.composer::before{
  content:'';position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(210,176,119,.28) 30%,rgba(210,176,119,.28) 70%,transparent);
}
.composer textarea{
  flex:1;resize:none;max-height:124px;min-height:44px;padding:11px 15px;
  border:1px solid var(--line);border-radius:15px;
  background:linear-gradient(180deg,#171310,#131110);
  font-size:15px;line-height:1.5;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.composer textarea:focus{
  border-color:#5a4729;
  box-shadow:0 0 0 3px rgba(210,176,119,.07),inset 0 1px 0 rgba(210,176,119,.08);
}
.composer textarea::placeholder{color:#584e42}
.send{
  width:44px;height:44px;border-radius:15px;border:0;font-size:15px;font-weight:600;
  color:#20180f;
  background:linear-gradient(165deg,#f0d6a0,#c2a163 55%,#a8854e);
  box-shadow:0 3px 12px rgba(210,176,119,.32),inset 0 1px 0 rgba(255,244,215,.65),inset 0 -2px 6px rgba(120,90,40,.35);
  transition:transform .16s,box-shadow .2s,filter .2s;
}
.send:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(210,176,119,.42),inset 0 1px 0 rgba(255,244,215,.75),inset 0 -2px 6px rgba(120,90,40,.35)}
.send:active{transform:scale(.94);box-shadow:0 1px 5px rgba(210,176,119,.22)}
.send:disabled{opacity:.35;transform:none;box-shadow:none;filter:grayscale(.4)}

/* ================= 鐨偆 ================= */
body[data-bubble="ink"] .bubble.me{
  --tail-me:#463723;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(228,196,130,.20) 0%,rgba(228,196,130,0) 58%),
    linear-gradient(155deg,#463723 0%,#2c2315 50%,#3d3119 100%);
  border-color:#8a6b34;color:#fbf1d8;
  box-shadow:0 5px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(246,222,170,.32),inset 0 0 26px rgba(210,176,119,.10);
}
body[data-bubble="ink"] .bubble.you{
  --tail-you:#2a231a;
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(228,196,130,.12) 0%,rgba(228,196,130,0) 58%),
    linear-gradient(155deg,#2a231a 0%,#191510 60%,#241d14 100%);
  border-color:#57452a;color:#f2e7cf;
  box-shadow:0 4px 16px rgba(0,0,0,.42),inset 0 1px 0 rgba(210,176,119,.18);
}
body[data-bubble="paper"] .bubble.me{
  --tail-me:#efe3c6;
  background:linear-gradient(160deg,#efe3c6,#dfd0ae);color:#241d14;
  border-color:#c8b994;box-shadow:0 3px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.45);
}
body[data-bubble="paper"] .bubble.you{
  --tail-you:#f5ecd9;
  background:linear-gradient(160deg,#f5ecd9,#e7dbc0);color:#241d14;
  border-color:#d4c6a4;box-shadow:0 3px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.5);
}
body[data-bubble="paper"] .bubble.system{color:#7c7260}
body[data-bubble="night"] .bubble.me{
  --tail-me:#22343e;
  background:linear-gradient(155deg,#22343e,#17262e);border-color:#33505f;color:#dbe9f2;
  box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(170,210,235,.18);
}
body[data-bubble="night"] .bubble.you{
  --tail-you:#1a252c;
  background:linear-gradient(155deg,#1a252c,#141e24);border-color:#2a3b45;color:#dbe9f2;
  box-shadow:0 4px 14px rgba(0,0,0,.38),inset 0 1px 0 rgba(170,210,235,.1);
}
body[data-bubble="night"] .bubble.system{color:#6d7f8a}

body[data-bubble="zhu"] .bubble.me{
  --tail-me:#5e2620;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(255,190,160,.16) 0%,rgba(255,190,160,0) 58%),
    linear-gradient(155deg,#6d2c23 0%,#3f1915 55%,#57221b 100%);
  border-color:#8f3c2f;color:#ffeadc;
  box-shadow:0 5px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,200,175,.26),inset 0 0 24px rgba(200,80,60,.10);
}
body[data-bubble="zhu"] .bubble.you{
  --tail-you:#2b1714;
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(255,170,140,.08) 0%,rgba(255,170,140,0) 58%),
    linear-gradient(155deg,#301b17 0%,#1c100e 62%,#28150f 100%);
  border-color:#5c2b22;color:#f3ded3;
  box-shadow:0 4px 16px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,180,150,.12);
}
body[data-bubble="zhu"] .bubble.system{color:#8a6f66}

/* ---------- 黑猫气泡 ---------- */
body[data-bubble="cat"] .bubble{
  border-radius:18px;
  background-color:#161311;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='%23d9b676' fill-opacity='0.055'%3E%3Cellipse cx='14' cy='20' rx='4.2' ry='3.4'/%3E%3Cellipse cx='9' cy='12.5' rx='1.9' ry='1.6'/%3E%3Cellipse cx='14' cy='10' rx='1.9' ry='1.6'/%3E%3Cellipse cx='19' cy='10' rx='1.9' ry='1.6'/%3E%3Cellipse cx='23.5' cy='13' rx='1.9' ry='1.6'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(115deg,#211d19 0%,#322a21 26%,#191613 46%,#2a2319 68%,#211d19 100%);
  background-repeat:repeat,no-repeat;
  background-size:46px 46px,260% 260%;
  border:1px solid #3b342d;
  color:#f2eade;
  box-shadow:0 4px 18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.055);
  overflow:visible;
  animation:pop .34s cubic-bezier(.22,1.1,.36,1),cat-shimmer 9s ease-in-out .34s infinite;
}
body[data-bubble="cat"] .bubble.you{
  background-color:#efe8da;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='%23241e16' fill-opacity='0.05'%3E%3Cellipse cx='14' cy='20' rx='4.2' ry='3.4'/%3E%3Cellipse cx='9' cy='12.5' rx='1.9' ry='1.6'/%3E%3Cellipse cx='14' cy='10' rx='1.9' ry='1.6'/%3E%3Cellipse cx='19' cy='10' rx='1.9' ry='1.6'/%3E%3Cellipse cx='23.5' cy='13' rx='1.9' ry='1.6'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(115deg,#f7f1e6 0%,#ffffff 24%,#e9dfcb 46%,#fbf5ea 68%,#f1e9da 100%);
  background-repeat:repeat,no-repeat;
  background-size:46px 46px,260% 260%;
  border-color:#cfc3ab;
  color:#2b241b;
  box-shadow:0 4px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.85);
}
@keyframes cat-shimmer{
  0%,100%{background-position:0 0,0% 50%}
  50%{background-position:0 0,100% 50%}
}
/* 气泡右上角那只小猫 */
.cat-deco{display:none}
body[data-bubble="cat"] .cat-deco{
  display:block;position:absolute;top:-13px;right:-6px;
  width:26px;height:24px;pointer-events:none;
  color:#1a1714;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
  animation:cat-in .5s cubic-bezier(.22,1.2,.36,1),cat-float 3.8s ease-in-out .5s infinite;
}
body[data-bubble="cat"] .row.you .cat-deco{left:-6px;right:auto}
@keyframes cat-in{
  0%{opacity:0;transform:translateY(-13px) scale(.45) rotate(-18deg)}
  62%{opacity:1;transform:translateY(2px) scale(1.09) rotate(6deg)}
  100%{opacity:1;transform:none}
}
body[data-bubble="cat"] .row.you .cat-deco{
  color:#f5efe3;
  filter:drop-shadow(0 0 1px rgba(60,48,34,.55)) drop-shadow(0 2px 5px rgba(0,0,0,.45));
}
.cat-deco svg{width:100%;height:100%;display:block;overflow:visible}
.cat-deco .c-eyes{transform-origin:13px 11px;animation:cat-blink 4.6s linear infinite}
.cat-deco .c-tail{transform-origin:20px 19px;animation:cat-tail 2.2s ease-in-out infinite}
.cat-deco .c-ear-l{transform-origin:6.5px 8px;animation:ear-flick 6.4s ease-in-out infinite}
.cat-deco .c-ear-r{transform-origin:19.5px 8px;animation:ear-flick 6.4s ease-in-out .9s infinite}
@keyframes ear-flick{
  0%,90%,100%{transform:rotate(0deg)}
  92%{transform:rotate(-13deg)}
  95%{transform:rotate(9deg)}
}
body[data-bubble="cat"] .row.me .cat-deco .c-eyes ellipse{fill:#d9b676}
body[data-bubble="cat"] .row.me .cat-deco .c-mouth{stroke:rgba(217,182,118,.5)}
body[data-bubble="cat"] .row.you .cat-deco .c-eyes ellipse{fill:rgba(52,40,28,.78)}
body[data-bubble="cat"] .row.you .cat-deco .c-mouth{stroke:rgba(52,40,28,.45)}
@keyframes cat-float{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-2px) rotate(2deg)}
}

body[data-bubble="cat"] .bubble.me::before,
body[data-bubble="cat"] .bubble.me::after,
body[data-bubble="cat"] .bubble.you::before,
body[data-bubble="cat"] .bubble.you::after{
  content:none;display:none;
}

/* ================= 鍐欎功 ================= */
#page-write{padding:0}
.chapters{
  width:34%;min-width:120px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#151110,#12100d);
  position:relative;
}
.chapters::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(210,176,119,.22) 20%,rgba(210,176,119,.22) 80%,transparent);
}
.new-chapter{
  margin:11px;padding:9px;border-radius:12px;font-size:13px;letter-spacing:1.5px;
  border:1px dashed #3a3229;background:transparent;color:var(--ink-faint);
  transition:.15s;
}
.new-chapter:hover{border-color:var(--gold-deep);color:var(--ink-dim)}
.new-chapter:active{background:#221c16;color:var(--ink)}
.chapter-list{flex:1;overflow-y:auto;padding:0 9px 12px}
.chapter-list::-webkit-scrollbar{width:0}
.chapter-item{
  position:relative;padding:9px 24px 9px 12px;border-radius:10px;
  font-size:13px;color:var(--ink-faint);margin-bottom:4px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:.15s;
}
.chapter-item:hover{background:#1b1613;color:var(--ink-dim)}
.chapter-item.active{
  background:linear-gradient(90deg,rgba(210,176,119,.14),rgba(210,176,119,.02));
  color:var(--ink);
}
.chapter-item.active::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#e8cb90,var(--gold-deep));
  box-shadow:0 0 8px rgba(210,176,119,.6);
}
.chapter-item .del{
  position:absolute;right:3px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;border:0;background:transparent;
  color:#6a6053;font-size:12px;line-height:1;display:none;
}
.chapter-item.active .del,.chapter-item:hover .del{display:block}
.chapter-item .del:active{background:#3a1f1f;color:#e2a0a0}

.sheet{
  flex:1;display:flex;flex-direction:column;min-width:0;
  padding:15px 17px calc(10px + var(--safe-b));
  background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.014),transparent 70%);
}
.brief{display:flex;flex-direction:column;gap:9px;margin-bottom:11px}
.brief.collapsed{display:none}
.brief textarea{
  resize:none;border:1px solid var(--line);border-radius:13px;
  background:linear-gradient(180deg,#16120f,#121010);
  padding:11px 13px;font-size:14px;line-height:1.7;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.brief textarea:focus{border-color:#5a4729;box-shadow:0 0 0 3px rgba(210,176,119,.06)}
.brief textarea::placeholder,.chapter-body::placeholder,.chapter-title::placeholder{color:#554b40}
.brief-actions{display:flex;gap:8px;align-items:center}
.brief-actions select{
  border:1px solid var(--line);border-radius:10px;color:var(--ink-dim);
  padding:7px 9px;font-size:13px;outline:none;
  background:linear-gradient(180deg,#181410,#141110);
  appearance:none;padding-right:22px;
  background-image:linear-gradient(180deg,#181410,#141110),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23887c6b'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 0,right 8px center;
}
.act{
  flex:1;padding:8px 6px;border-radius:10px;font-size:13px;letter-spacing:1.5px;
  border:1px solid #4a3c2a;color:var(--ink);
  background:linear-gradient(170deg,#241d15,#1a1512);
  transition:.15s;
}
.act:hover{border-color:var(--gold-deep)}
.act:active{transform:scale(.975);background:linear-gradient(170deg,#2e2519,#211a13)}
.act:disabled{opacity:.4;transform:none}

.chapter-title{
  border:0;background:transparent;
  background-image:linear-gradient(90deg,rgba(210,176,119,.45),rgba(210,176,119,.10) 60%,rgba(210,176,119,0));
  background-repeat:no-repeat;background-position:left bottom;background-size:100% 1px;
  font-size:18px;letter-spacing:1.5px;padding:6px 2px 11px;outline:none;
  transition:background-image .25s;
}
.chapter-title:focus{
  background-image:linear-gradient(90deg,rgba(210,176,119,.85),rgba(210,176,119,.18) 70%,rgba(210,176,119,0));
}
.chapter-body{
  flex:1;margin-top:13px;border:0;background:transparent;resize:none;outline:none;
  font-size:16px;line-height:1.95;letter-spacing:.3px;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1.95em - 1px),
    rgba(210,176,119,.055) calc(1.95em - 1px),
    rgba(210,176,119,.055) 1.95em
  );
  background-size:100% 1.95em;
  background-attachment:local;
}
.chapter-body::-webkit-scrollbar{width:6px}
.sheet-foot{
  display:flex;justify-content:space-between;align-items:center;
  color:var(--ink-faint);font-size:12px;letter-spacing:1px;
  padding-top:8px;border-top:1px solid var(--line-soft);
}
.sheet-foot button.ghost{width:auto;padding:0 9px;height:23px;font-size:11px;border-radius:7px}

/* ================= 鎶藉眽 ================= */
.drawer{position:fixed;inset:0;z-index:40;display:none}
.drawer.open{display:block}
.drawer-mask{position:absolute;inset:0;background:rgba(6,5,4,.62);backdrop-filter:blur(2px);animation:fade .22s ease}
.drawer-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(78vw,322px);
  background:linear-gradient(180deg,#1b1713,#141110);
  padding:calc(18px + var(--safe-t)) 17px calc(18px + var(--safe-b));
  overflow-y:auto;animation:slide .24s cubic-bezier(.2,.8,.3,1);
  box-shadow:-16px 0 40px rgba(0,0,0,.55);
}
.drawer-panel::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(210,176,119,.38) 15%,rgba(210,176,119,.38) 85%,transparent);
}
@keyframes slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.drawer-head{
  position:relative;
  font-size:16px;letter-spacing:5px;color:var(--gold);margin-bottom:20px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.drawer-head::after{
  content:'砚';position:absolute;right:0;top:-4px;
  width:27px;height:27px;line-height:27px;text-align:center;
  font-size:14px;letter-spacing:0;
  color:#fbeee0;background:linear-gradient(160deg,#b0483a,#8e3327);
  border-radius:5px;transform:rotate(-7deg);
  box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,200,180,.35);
  opacity:.92;
}
.drawer-label{
  font-size:11px;color:#6f665a;letter-spacing:2.5px;margin:18px 0 9px;
}
.drawer-label::before{content:'鈥?';color:var(--gold-deep);opacity:.6}

.skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.skin{
  border:1px solid var(--line);border-radius:13px;padding:9px 7px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:linear-gradient(170deg,#181410,#131110);transition:.18s;
}
.skin:hover{border-color:#3d3327}
.skin.on{
  border-color:var(--gold-deep);
  box-shadow:0 0 0 1px rgba(210,176,119,.22),0 3px 14px rgba(210,176,119,.12);
}
.skin-rows{width:100%;display:flex;flex-direction:column;gap:3px}
.skin-rows i{height:7px;border-radius:3.5px;display:block;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.skin span{font-size:12px;color:var(--ink-faint);letter-spacing:1px}
.skin.on span{color:var(--gold)}
.skin-rows i:nth-child(1){border-radius:3.5px 3.5px 3.5px 1px;margin-left:14%}
.skin-rows i:nth-child(2){border-radius:3.5px 3.5px 1px 3.5px;margin-right:14%}

.row-btn{
  width:100%;text-align:left;padding:11px 13px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(170deg,#181410,#131110);
  color:var(--ink);font-size:14px;transition:.15s;
}
.row-btn:hover{border-color:#3d3327}
.row-btn:active{background:linear-gradient(170deg,#221c16,#1a1512);border-color:var(--gold-deep)}
.row-btn.danger{color:#c98a8a}
.row-btn.danger:hover{border-color:#5c3434}
.stat-line{font-size:12px;color:var(--ink-faint);letter-spacing:1px;padding:0 4px 11px}
.drawer-foot{
  margin-top:24px;padding-top:13px;border-top:1px solid var(--line-soft);
  font-size:11px;color:#4f473d;letter-spacing:1px;text-align:center;
}

/* ================= 鎻愮ず ================= */
.netbar{
  display:none;
  background:linear-gradient(90deg,rgba(168,64,47,.85),rgba(120,44,32,.85));
  color:#ffe9d8;font-size:12px;letter-spacing:1.5px;text-align:center;padding:6px 10px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.netbar.on{display:block}

.installbar{
  position:fixed;left:50%;bottom:calc(15px + var(--safe-b));
  transform:translate(-50%,150%);
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:15px;font-size:13px;color:var(--ink);z-index:45;
  border:1px solid #5a4729;
  background:linear-gradient(170deg,#241d15,#181310);
  box-shadow:0 10px 36px rgba(0,0,0,.6),inset 0 1px 0 rgba(210,176,119,.15);
  max-width:92vw;transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.installbar.on{transform:translate(-50%,0)}
.installbar span{flex:1;line-height:1.45}
.ib-act{
  border:0;border-radius:10px;padding:7px 15px;font-size:13px;font-weight:600;color:#20180f;
  background:linear-gradient(165deg,#e8cb90,#b08f55);
  box-shadow:inset 0 1px 0 rgba(255,240,205,.5);
}
.ib-act:active{transform:scale(.96)}
.ib-x{border:0;background:transparent;color:#6d6357;font-size:12px;padding:4px}

.toast{
  position:fixed;left:50%;bottom:16%;transform:translate(-50%,10px);
  padding:9px 17px;border-radius:999px;font-size:13px;color:var(--ink);z-index:60;
  border:1px solid #4a3c2a;
  background:linear-gradient(170deg,#2a2219,#1d1712);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:.24s;max-width:80vw;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:560px){
  #page-write{flex-direction:column}
  .chapters{
    width:100%;min-width:0;max-height:102px;
    flex-direction:row;align-items:center;gap:6px;
    padding:6px 8px;overflow:hidden;
  }
  .chapters::after{
    left:0;right:0;top:auto;bottom:0;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,rgba(210,176,119,.22),transparent);
  }
  .new-chapter{margin:0;flex:0 0 auto;padding:8px 11px;font-size:12px}
  .chapter-list{
    flex:1;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;
    padding:0 2px 2px;white-space:nowrap;scrollbar-width:none;
  }
  .chapter-list::-webkit-scrollbar{height:0}
  .chapter-item{
    flex:0 0 auto;max-width:132px;margin:0;padding:7px 21px 7px 11px;
    font-size:12px;background:#1a1513;
  }
  .chapter-item.active::before{display:none}
  .chapter-item .del{display:block;right:2px}
  .sheet{padding:11px 13px calc(8px + var(--safe-b))}
  .brief textarea{font-size:13px;max-height:64px}
  .brief-actions{flex-wrap:wrap;gap:6px}
  .brief-actions select{flex:0 0 auto;padding:7px 8px}
  .act{padding:8px 4px}
  .chapter-body{font-size:15.5px;line-height:1.9}
}

@media (max-width:420px){
  .chapter-title{font-size:16px}
  .bubble{max-width:84%}
  .tabs{margin:0 auto}
  .tab{padding:6px 15px}
}

@media (min-width:820px){
  body{background:
    radial-gradient(75% 45% at 50% -8%,#2a2118 0%,rgba(42,33,24,0) 70%),
    linear-gradient(180deg,#0e0c0a 0%,#0a0908 100%)}
  .app{
    width:100%;max-width:900px;
    margin:0 auto;height:100%;
    border-left:1px solid rgba(210,176,119,.10);
    border-right:1px solid rgba(210,176,119,.10);
    box-shadow:0 0 80px rgba(0,0,0,.7);
  }
  .lock-card{width:360px}
  .thread{padding:28px 30px 14px;gap:15px}
  .bubble{max-width:70%;font-size:15.5px}
  .sheet{padding:20px 26px 20px}
  .chapters{width:222px;min-width:182px}
}