/* 書僮喵 v3.8：紙箋改為更像古典紙箋、帶淡淡羊皮紙感。 */
#stm-root{position:fixed;bottom:12px;left:12px;z-index:999999;font-family:inherit;pointer-events:auto}
#stm-root *{box-sizing:border-box}
#stm-root .stm-cat{display:block;position:relative;z-index:1;width:130px;height:112px;border:0;background:transparent;padding:0;margin:0;cursor:pointer;pointer-events:auto;line-height:0;filter:drop-shadow(0 2px 2px rgba(55,42,30,.09));transition:transform .25s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#stm-root .stm-cat:hover{transform:translateY(-3px)}
#stm-root .stm-cat:focus-visible,#stm-root .stm-close:focus-visible,#stm-root .stm-disable:focus-visible,#stm-restore:focus-visible{outline:2px solid #8f927e;outline-offset:3px}
#stm-root .stm-cat img{position:absolute;left:0;bottom:0;display:block;width:130px;height:auto;max-width:none;pointer-events:none}
#stm-root.stm-awake .stm-cat img{width:80px;height:auto}

#stm-root .stm-note{
  position:absolute;bottom:calc(100% + 10px);left:12px;
  width:min(350px,calc(100vw - 34px));max-height:min(67vh,620px);overflow-y:auto;overflow-x:hidden;
  padding:27px 26px 20px;margin:0;
  color:#53483c;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,252,244,.75) 0, rgba(255,252,244,0) 20%),
    radial-gradient(circle at 84% 18%, rgba(243,226,188,.28) 0, rgba(243,226,188,0) 24%),
    radial-gradient(circle at 18% 78%, rgba(224,197,148,.16) 0, rgba(224,197,148,0) 18%),
    radial-gradient(circle at 88% 84%, rgba(215,183,133,.14) 0, rgba(215,183,133,0) 15%),
    linear-gradient(180deg, #fcf5e8 0%, #f6ecdc 100%);
  border:1px solid #dcc9a8;
  border-radius:14px;
  box-shadow:
    0 18px 38px rgba(83,62,35,.12),
    0 4px 12px rgba(83,62,35,.05),
    inset 0 1px 0 rgba(255,251,241,.82),
    inset 0 -10px 18px rgba(182,143,89,.10),
    inset 0 0 0 1px rgba(255,246,228,.5);
  pointer-events:auto;text-align:left;
  font-family:Georgia,"Noto Serif TC","Songti TC","PMingLiU",serif;
  font-size:16px;font-weight:400;line-height:1.8;letter-spacing:normal;
  scrollbar-width:thin;scrollbar-color:#cdb894 transparent;
}
#stm-root .stm-note::before{
  content:"";position:absolute;inset:8px;border-radius:10px;pointer-events:none;
  border:1px solid rgba(184,156,113,.42);
  box-shadow:
    inset 0 0 0 1px rgba(255,248,233,.35),
    inset 0 0 22px rgba(255,255,255,.08);
}
#stm-root .stm-note::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;opacity:.42;
  background:
    radial-gradient(circle at 14% 26%, rgba(136,104,58,.08) 0 .7px, transparent .9px),
    radial-gradient(circle at 38% 72%, rgba(136,104,58,.06) 0 .8px, transparent 1px),
    radial-gradient(circle at 78% 24%, rgba(136,104,58,.07) 0 .75px, transparent .95px),
    radial-gradient(circle at 86% 80%, rgba(136,104,58,.05) 0 .7px, transparent .9px),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(120,86,42,.03));
}
#stm-root .stm-note[hidden],#stm-root[hidden],#stm-restore-wrap[hidden]{display:none!important}
#stm-root .stm-note .stm-meow{
  position:relative;display:block;margin:0 34px 17px 0;padding:0;
  border:0;color:#9d8157;font-family:"Noto Serif TC","Songti TC",Georgia,serif;
  font-size:13px!important;line-height:1.7!important;letter-spacing:.085em;font-weight:600;
}
#stm-root .stm-note #stm-quote{
  display:block;margin:0;padding:0;border:0;background:transparent;
  color:#4f463b;font-family:Georgia,"Noto Serif TC","Songti TC","PMingLiU",serif;
  font-size:16px!important;line-height:1.9!important;letter-spacing:.015em!important;
  text-indent:0;text-align:left;overflow-wrap:anywhere;white-space:pre-wrap;font-weight:400;
  text-shadow:0 1px 0 rgba(255,250,242,.18);
}
#stm-root .stm-note .stm-quote-part{display:block;white-space:pre-wrap;margin:0;padding:0;font-size:inherit;line-height:inherit;font-family:inherit}
#stm-root .stm-note .stm-quote-part + .stm-quote-part{margin-top:15px}
#stm-root .stm-note .stm-quote-en{line-height:1.86;letter-spacing:.005em}
#stm-root .stm-note .stm-quote-zh{line-height:1.95;letter-spacing:.035em}
#stm-root .stm-close{
  position:absolute;top:12px;right:12px;width:29px;height:29px;
  display:grid;place-items:center;margin:0;padding:0;
  background:transparent;border:0;border-radius:50%;
  font-family:Arial,sans-serif;font-weight:300;font-size:22px!important;line-height:1!important;
  color:#977c57;cursor:pointer;transition:background .15s,color .15s;
}
#stm-root .stm-close:hover{background:rgba(243,233,212,.95);color:#5f5648}
#stm-root .stm-note .stm-disable{
  display:block;width:max-content;max-width:100%;margin:22px 0 0 auto;padding:0;
  border:0;background:transparent;
  color:#91785b;font-family:"Noto Sans TC",system-ui,sans-serif;
  font-size:11px!important;font-weight:400;line-height:1.65!important;
  letter-spacing:.025em;text-align:right;text-decoration:none;cursor:pointer;
}
#stm-root .stm-note .stm-disable:hover{text-decoration:underline;text-underline-offset:4px;color:#655740}
#stm-restore-wrap{position:relative;z-index:1;text-align:center;padding:10px 8px 16px;font-size:12px}
#stm-restore{border:0;background:transparent;color:#777064;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 8px;font:inherit}
@media(max-width:600px){
  #stm-root{bottom:6px;left:5px}
  #stm-root .stm-cat{width:100px;height:90px}
  #stm-root .stm-cat img{width:100px;height:auto}
  #stm-root.stm-awake .stm-cat img{width:62px;height:auto}
  #stm-root .stm-note{left:6px;bottom:calc(100% + 6px);width:min(324px,calc(100vw - 24px));max-height:65dvh;padding:22px 20px 16px;border-radius:13px}
  #stm-root .stm-note::before{inset:6px;border-radius:9px}
  #stm-root .stm-note::after{border-radius:13px}
  #stm-root .stm-note .stm-meow{margin-bottom:14px;font-size:12px!important}
  #stm-root .stm-note #stm-quote{font-size:15px!important;line-height:1.86!important}
  #stm-root .stm-note .stm-quote-part + .stm-quote-part{margin-top:12px}
  #stm-root .stm-note .stm-disable{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){#stm-root .stm-cat,#stm-root .stm-close{transition:none}}
