@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap");

@font-face {
  font-family: "LXGW WenKai";
  src: url("https://cdn.jsdelivr.net/gh/lxgw/LxgwWenKai@latest/fonts/TTF/LXGWWenKai-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

ai {
  --ink: #262a36;
  --mut: #7b8095;
  --hair: rgba(90, 100, 140, .16);
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "LXGW WenKai", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --noise: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0"/></filter><rect width="120" height="120" filter="url(%23n)"/></svg>');
  display: block;
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 16px 16px 20px;
  font: 15px/1.8 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background: var(--noise), radial-gradient(120% 80% at 50% 0%, #f7f8fc, #e9ecf4 60%, #e0e4ef);
  border-radius: 22px;
  box-shadow: 0 2px 4px rgba(30, 35, 70, .06), 0 16px 48px rgba(30, 35, 70, .16), inset 0 1px 0 #fff;
}

ai .qun,
ai .qun *,
ai apps,
ai apps * {
  box-sizing: border-box;
}

ai,
ai * {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

/* ══════════════════════════════ 手机聊天界面 ══════════════════════════════ */
ai .qun {
  width: 100%;
  overflow: hidden;
  background: #f4f5f9;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(25, 30, 60, .08), 0 12px 36px rgba(25, 30, 60, .18), 0 0 0 1px rgba(255, 255, 255, .7);
}

ai .qbar {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 15px 19px;
  color: #f0f1f7;
  background: var(--noise), linear-gradient(160deg, rgba(35, 38, 51, .02), transparent), linear-gradient(160deg, #252836, #323850);
  border-bottom: 1px solid rgba(205, 180, 130, .45);
}

ai .qback {
  flex: 0 0 30px;
  font-size: 25px;
  line-height: 1;
  opacity: .75;
  transition: opacity .2s ease, transform .2s ease;
}

ai .qback:hover {
  opacity: 1;
  transform: translateX(-2px);
}

ai .qname {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff, #c9cede);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

ai .qmore {
  flex: 0 0 30px;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: right;
  opacity: .75;
}

ai .qintro {
  position: relative;
  margin: 20px 18px 10px;
  padding: 17px 21px 17px 47px;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  line-height: 2.15;
  letter-spacing: .5px;
  color: #666b82;
  text-align: justify;
  background: var(--noise), linear-gradient(150deg, #fdfdfe, #f2f3f9);
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(40, 50, 90, .05), 0 5px 16px rgba(40, 50, 90, .08);
}

ai .qintro::before {
  content: "❝";
  position: absolute;
  top: 7px;
  left: 14px;
  font-size: 31px;
  line-height: 1;
  background: linear-gradient(160deg, #9fa8c3, #d8dce8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

ai .qintro::first-letter {
  font-size: 1.45em;
  font-weight: 700;
  color: #4a5170;
}

ai k {
  display: inline-block;
  padding: 1px 6px;
  font-style: normal;
  font-weight: 800;
  color: #6d568f;
  background: rgba(130, 105, 175, .12);
  border-bottom: 1px solid rgba(130, 105, 175, .34);
  border-radius: 4px;
}

ai .qbody {
  display: block !important;
  max-height: 680px;
  padding: 23px 19px 17px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c8cddd transparent;
}

ai .qbody > * {
  flex: none !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

ai .qbody::-webkit-scrollbar {
  width: 4px;
}

ai .qbody::-webkit-scrollbar-track {
  background: transparent;
}

ai .qbody::-webkit-scrollbar-thumb {
  background: #c8cddd;
  border-radius: 99px;
}

/* 时间戳 */
ai qt {
  display: table;
  width: auto !important;
  max-width: 90%;
  margin: 2px auto 22px;
  padding: 4px 12px;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
  background: rgba(75, 80, 105, .38);
  border-radius: 99px;
  box-shadow: 0 1px 2px rgba(30, 35, 65, .08);
}

/* 消息行 */
ai .qmsg {
  display: flex !important;
  align-items: flex-start;
  gap: 13px;
  width: 100% !important;
  min-width: 100%;
  margin: 0 0 25px;
  animation: aiUp .45s cubic-bezier(.22, .9, .36, 1);
}

ai .qhead {
  display: block;
  flex: 0 0 auto !important;
  width: 48px !important;
  height: 48px;
  object-fit: cover;
  background: #e2e5ee;
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(30, 40, 80, .12), 0 4px 9px rgba(30, 40, 80, .15), 0 0 0 1px #fff;
  transition: transform .25s ease;
}

ai .qmsg:hover .qhead {
  transform: scale(1.05) rotate(-2deg);
}

ai .qcol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 76%;
}

ai .qnick {
  display: block;
  max-width: 100%;
  margin: 0 0 7px 6px;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.1px;
  color: #9299af;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
}

ai .qbub {
  position: relative;
  max-width: 100%;
  padding: 12px 17px;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: .35px;
  overflow-wrap: break-word;
  word-break: break-word;
  color: #282c39;
  background: var(--noise), #fff;
  border-radius: 4px 17px 17px 17px;
  box-shadow: 0 1px 2px rgba(40, 50, 100, .07), 0 6px 14px rgba(40, 50, 100, .09), inset 0 0 0 1px rgba(235, 238, 248, .9);
  transition: box-shadow .2s ease, transform .2s ease;
}

ai .qbub::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -6px;
  width: 11px;
  height: 11px;
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

ai .qmsg:hover .qbub {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(40, 50, 100, .1), 0 9px 20px rgba(40, 50, 100, .13), inset 0 0 0 1px rgba(225, 230, 245, 1);
}

/* 玩家右侧消息 */
ai .qmsg.r {
  flex-direction: row-reverse;
}

ai .qmsg.r .qhead {
  transform: none;
}

ai .qmsg.r:hover .qhead {
  transform: scale(1.05) rotate(2deg);
}

ai .qmsg.r .qcol {
  align-items: flex-end;
}

ai .qmsg.r .qnick {
  margin: 0 6px 7px 0;
  text-align: right;
}

ai .qmsg.r .qbub {
  color: #eef0f8;
  background: var(--noise), linear-gradient(150deg, #3e4564, #262b3f);
  border-radius: 17px 4px 17px 17px;
  box-shadow: 0 1px 2px rgba(25, 30, 60, .2), 0 7px 17px rgba(25, 30, 60, .29), inset 0 1px 0 rgba(255, 255, 255, .12);
}

ai .qmsg.r .qbub::before {
  right: -6px;
  left: auto;
  background: #292e43;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ══════════════════════════════ 剧中旁白 ══════════════════════════════ */
ai .qnar {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 6px 0 20px;
  padding: 14px 17px 14px 19px;
  font-family: var(--serif);
  font-size: 13.5px;
  font-style: italic;
  line-height: 2.05;
  letter-spacing: .6px;
  color: #7d8399;
  text-align: justify;
  text-indent: 2em;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  background: linear-gradient(100deg, rgba(120, 130, 170, .075), rgba(120, 130, 170, .025));
  border-left: 2px solid rgba(150, 158, 190, .55);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 2px rgba(40, 50, 90, .04);
}

ai .qnar::before,
ai .qnar::after {
  content: none !important;
  display: none !important;
}

ai .qnar.end {
  margin-top: 12px;
  margin-bottom: 8px;
  color: #6d7391;
  background: linear-gradient(100deg, rgba(110, 120, 165, .1), rgba(110, 120, 165, .03));
  border-left-color: rgba(120, 130, 175, .8);
}

ai .qnar.line {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 10px 0 22px;
  padding: 0 5px;
  font-size: 13px;
  line-height: 2;
  letter-spacing: .9px;
  color: #898fa6;
  text-align: center;
  text-indent: 0;
  background: none;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
}

ai .qnar.line::before,
ai .qnar.line::after {
  content: "" !important;
  display: block !important;
  flex: 1;
  max-width: 70px;
  height: 3px;
  border-top: 1px solid #b8bdd2;
  border-bottom: 1px solid rgba(184, 189, 210, .4);
}

ai .qnar + .qnar {
  margin-top: -8px;
}

ai .qnar + .qmsg,
ai .qmsg + .qnar {
  margin-top: 2px;
}

ai .qbody > *:last-child {
  margin-bottom: 4px;
}

/* ══════════════════════════════ 正文内立绘 CG ══════════════════════════════ */
ai cg {
  position: relative;
  display: block;
  width: 100% !important;
  max-width: 420px;
  margin: 18px auto 24px;
  padding: 7px 7px 9px;
  overflow: hidden;
  background: var(--noise), linear-gradient(160deg, #2a2338, #17121f);
  border-radius: 14px;
  box-shadow:
    0 2px 5px rgba(20, 12, 35, .35),
    0 16px 38px rgba(20, 12, 35, .45),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 0 1px rgba(180, 145, 235, .22);
  animation: cgReveal .75s cubic-bezier(.22, .9, .36, 1) backwards;
}

ai cg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 175, 255, .7), transparent);
  pointer-events: none;
  z-index: 2;
}

ai cg img {
  display: block;
  width: 100%;
  height: auto;
  background: #1c1626;
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  transition: transform .5s cubic-bezier(.22, .9, .36, 1), filter .4s ease;
}

ai cg:hover img {
  transform: scale(1.018);
  filter: saturate(1.06) brightness(1.03);
}

ai cg[c]::after {
  content: attr(c);
  display: block;
  margin-top: 8px;
  padding: 4px 10px 2px;
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
  letter-spacing: 1.6px;
  line-height: 1.7;
  text-align: center;
  color: rgba(220, 205, 250, .72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

@keyframes cgReveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.965);
    filter: blur(7px) brightness(1.25);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) brightness(1);
  }
}

ai cg[t="日常"] {
  max-width: 330px;
  background: var(--noise), linear-gradient(160deg, #f3f0f7, #e6e2ee);
  box-shadow:
    0 2px 4px rgba(60, 50, 90, .12),
    0 12px 28px rgba(60, 50, 90, .2),
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(150, 140, 185, .3);
}

ai cg[t="日常"]::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
}

ai cg[t="日常"][c]::after {
  color: #6f6a86;
  text-shadow: 0 1px 0 #fff;
}

ai cg[t="性爱"] {
  background: var(--noise), linear-gradient(160deg, #35182c, #1b0d18);
  box-shadow:
    0 2px 6px rgba(45, 10, 30, .45),
    0 18px 44px rgba(45, 10, 30, .55),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 0 0 1px rgba(225, 120, 175, .3),
    0 0 26px rgba(200, 85, 145, .18);
  animation:
    cgReveal .75s cubic-bezier(.22, .9, .36, 1) backwards,
    cgPulse 4.5s 1s ease-in-out infinite;
}

ai cg[t="性爱"]::before {
  background: linear-gradient(90deg, transparent, rgba(255, 165, 210, .8), transparent);
}

ai cg[t="性爱"][c]::after {
  color: rgba(250, 205, 228, .78);
}

@keyframes cgPulse {
  0%, 100% {
    box-shadow:
      0 2px 6px rgba(45, 10, 30, .45),
      0 18px 44px rgba(45, 10, 30, .55),
      inset 0 1px 0 rgba(255, 255, 255, .09),
      0 0 0 1px rgba(225, 120, 175, .3),
      0 0 26px rgba(200, 85, 145, .18);
  }
  50% {
    box-shadow:
      0 2px 6px rgba(45, 10, 30, .45),
      0 18px 44px rgba(45, 10, 30, .55),
      inset 0 1px 0 rgba(255, 255, 255, .09),
      0 0 0 1px rgba(235, 140, 190, .48),
      0 0 40px rgba(210, 95, 155, .3);
  }
}

/* 语音消息 */
ai qvo {
  position: relative;
  display: inline-block;
  width: auto !important;
  min-width: 155px;
  max-width: 290px;
  padding: 12px 52px 12px 17px;
  font-size: 14.5px;
  line-height: 1.8;
  overflow-wrap: break-word;
  word-break: break-word;
  color: #323746;
  background: var(--noise), #fff;
  border-radius: 4px 17px 17px 17px;
  box-shadow: 0 1px 2px rgba(40, 50, 100, .07), 0 6px 14px rgba(40, 50, 100, .09), inset 0 0 0 1px rgba(235, 238, 248, .9);
}

ai qvo::before {
  content: "◖))";
  position: absolute;
  top: 50%;
  right: 18px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -3px;
  color: #65708f;
  transform: translateY(-50%);
}

ai qvo::after {
  content: attr(s) "″";
  position: absolute;
  right: 8px;
  bottom: -19px;
  font-size: 10px;
  line-height: 1;
  color: #969db3;
}

/* 图片消息 */
ai qimg {
  display: block;
  width: min(340px, 100%);
  overflow: hidden;
  background: #e1e4ed;
  border: 5px solid #fff;
  border-radius: 5px 17px 17px 17px;
  box-shadow: 0 2px 5px rgba(30, 40, 80, .12), 0 11px 24px rgba(30, 40, 80, .16);
}

ai qimg img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  background: #e2e5ee;
  transition: transform .35s ease;
}

ai qimg:hover img {
  transform: scale(1.025);
}

/* 系统消息 */
ai qsys {
  display: table;
  width: auto !important;
  max-width: 86%;
  margin: 8px auto 22px;
  padding: 6px 13px;
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: .3px;
  color: #7e849a;
  text-align: center;
  background: rgba(110, 120, 150, .09);
  border: 1px solid rgba(110, 120, 150, .14);
  border-radius: 8px;
}

/* 正在输入 */
ai qtp {
  display: block;
  margin: -9px 0 21px 61px;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #969db3;
  animation: aiTyping 1.4s ease-in-out infinite;
}

@keyframes aiTyping {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

@keyframes aiUp {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ══════════════════════════════ 状态栏 App Dock ══════════════════════════════ */
ai apps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 19px 17px;
  width: 100%;
  padding: 22px 8px 8px;
  margin-top: 17px;
}

ai apps::before {
  content: "—  S T A T U S  —";
  flex: 1 1 100%;
  font-family: var(--serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 6px;
  text-align: center;
  background: linear-gradient(180deg, #9298b2, #b8bdd2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

ai apps > details {
  flex: 0 0 auto;
  margin: 0;
}

ai apps > details > summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #4a4f66;
  text-shadow: 0 1px 0 #fff;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

ai apps > details > summary::-webkit-details-marker {
  display: none;
}

ai ic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  font-size: 0;
  font-style: normal;
  background: var(--noise), var(--ap);
  border-radius: 17px;
  box-shadow: 0 1px 2px var(--sh), 0 9px 20px var(--sh), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -7px 13px rgba(0, 0, 0, .24);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}

ai ic::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 16px;
  background: radial-gradient(85% 55% at 30% 12%, rgba(255, 255, 255, .42), transparent 60%);
}

ai ic::after {
  content: var(--gl);
  position: relative;
  font-size: 25px;
  filter: grayscale(0) invert(1) drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
  opacity: .95;
}

ai apps > details:not([open]) ic {
  animation: aiFloat 3.6s ease-in-out infinite;
}

ai apps > details:nth-of-type(2):not([open]) ic { animation-delay: .45s; }
ai apps > details:nth-of-type(3):not([open]) ic { animation-delay: .9s; }
ai apps > details:nth-of-type(4):not([open]) ic { animation-delay: 1.35s; }
ai apps > details:nth-of-type(5):not([open]) ic { animation-delay: 1.8s; }
ai apps > details:nth-of-type(6):not([open]) ic { animation-delay: 2.25s; }
ai apps > details:nth-of-type(7):not([open]) ic { animation-delay: 2.7s; }

@keyframes aiFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

ai apps > details > summary:hover ic {
  animation: none;
  transform: translateY(-7px) scale(1.07);
  box-shadow: 0 2px 4px var(--sh), 0 18px 32px var(--sh), inset 0 1px 0 rgba(255, 255, 255, .45);
}

ai apps > details:not([open]) mc {
  display: none;
}

/* App主题 */
ai apps > details[t="me"] {
  --ap: linear-gradient(155deg, #5d6fae, #333c68);
  --sh: rgba(60, 75, 140, .38);
  --th: #4a568f;
  --en: "P R O F I L E";
  --gl: "👤";
}

ai apps > details[t="np"] {
  --ap: linear-gradient(155deg, #c96a8d, #822f52);
  --sh: rgba(160, 60, 100, .38);
  --th: #a94f74;
  --en: "T E N A N T S";
  --gl: "💗";
}

ai apps > details[t="ls"] {
  --ap: linear-gradient(155deg, #3f9d84, #175146);
  --sh: rgba(40, 120, 100, .38);
  --th: #2e7d68;
  --en: "S T R A T E G Y";
  --gl: "📇";
}

ai apps > details[t="pr"] {
  --ap: linear-gradient(155deg, #7657d4, #301a76);
  --sh: rgba(85, 55, 170, .42);
  --th: #7b5cc9;
  --en: "P R I S M";
  --gl: "🔮";
}

ai apps > details[t="cg"] {
  --ap: linear-gradient(155deg, #9572c4, #4f3478);
  --sh: rgba(115, 80, 170, .38);
  --th: #7a5aa8;
  --en: "G A L L E R Y";
  --gl: "🖼";
}

ai apps > details[t="mm"] {
  --ap: linear-gradient(155deg, #4a5488, #1d2240);
  --sh: rgba(50, 60, 110, .42);
  --th: #3d477a;
  --en: "M E M O R Y";
  --gl: "🌌";
}

ai apps > details[t="ac"] {
  --ap: linear-gradient(155deg, #c99a54, #7c5420);
  --sh: rgba(170, 125, 55, .38);
  --th: #a87c3a;
  --en: "A C T I O N";
  --gl: "🎯";
}

/* App展开 */
ai apps > details[open] {
  order: 99;
  flex: 1 1 100%;
  width: 100%;
  animation: aiPop .4s cubic-bezier(.34, 1.4, .64, 1);
}

ai apps > details[open] > summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 19px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 5px;
  color: #fff;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%) 130% 0/250% 100% no-repeat, var(--noise), var(--ap);
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  border-radius: 16px 16px 0 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 0 18px rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -14px 22px rgba(0, 0, 0, .16);
  animation: aiSheen 4s ease-in-out infinite;
}

ai apps > details[open] > summary::before {
  content: var(--en);
  order: 1;
  align-self: flex-end;
  padding-bottom: 3px;
  font-family: var(--serif);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 2px;
  opacity: .65;
  text-shadow: none;
}

ai apps > details[open] > summary::after {
  content: "收起 ▾";
  order: 3;
  margin-left: auto;
  padding: 3px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-shadow: none;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 99px;
  transition: background .2s ease, border-color .2s ease;
}

ai apps > details[open] > summary:hover::after {
  background: rgba(0, 0, 0, .35);
  border-color: rgba(255, 255, 255, .55);
}

ai apps > details[open] ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  animation: aiHalo 2.6s ease-in-out infinite;
}

ai apps > details[open] ic::before {
  display: none;
}

ai apps > details[open] ic::after {
  font-size: 15px;
}

@keyframes aiHalo {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 0 0 rgba(255, 255, 255, .35); }
  50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 0 5px rgba(255, 255, 255, 0); }
}

@keyframes aiSheen {
  0%, 55% { background-position: 130% 0, 0 0, 0 0; }
  100% { background-position: -90% 0, 0 0, 0 0; }
}

@keyframes aiPop {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 内容进场 */
ai apps > details[open] bd > *,
ai apps > details[open] np > *,
ai apps > details[open] pr > * {
  animation: aiIn .5s cubic-bezier(.22, .9, .36, 1) backwards;
}

ai apps > details[open] bd > *:nth-child(1),
ai apps > details[open] np > *:nth-child(1) { animation-delay: .05s; }

ai apps > details[open] bd > *:nth-child(2),
ai apps > details[open] np > *:nth-child(2) { animation-delay: .1s; }

ai apps > details[open] bd > *:nth-child(3),
ai apps > details[open] np > *:nth-child(3) { animation-delay: .15s; }

ai apps > details[open] bd > *:nth-child(4),
ai apps > details[open] np > *:nth-child(4) { animation-delay: .2s; }

ai apps > details[open] bd > *:nth-child(5),
ai apps > details[open] np > *:nth-child(5) { animation-delay: .25s; }

ai apps > details[open] bd > *:nth-child(6),
ai apps > details[open] np > *:nth-child(6) { animation-delay: .3s; }

ai apps > details[open] bd > *:nth-child(7),
ai apps > details[open] np > *:nth-child(7) { animation-delay: .35s; }

ai apps > details[open] bd > *:nth-child(8),
ai apps > details[open] np > *:nth-child(8) { animation-delay: .4s; }

ai apps > details[open] bd > *:nth-child(n+9),
ai apps > details[open] np > *:nth-child(n+9) { animation-delay: .45s; }

@keyframes aiIn {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ══════════════════════════════ 通用面板与字段 ══════════════════════════════ */
ai bd {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  width: 100%;
  padding: 14px 21px 20px;
  font-size: 14px;
  line-height: 1.85;
  background: var(--noise), linear-gradient(#fdfdfe, #f7f8fc);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 1px 2px rgba(40, 50, 100, .06), 0 12px 28px rgba(40, 50, 100, .12), inset 0 0 0 1px rgba(255, 255, 255, .85);
}

ai d {
  display: flex;
  flex: 1 1 42%;
  align-items: baseline;
  gap: 11px;
  min-width: 170px;
  padding: 11px 5px;
  overflow-wrap: break-word;
  word-break: break-word;
  border-bottom: 1px solid var(--hair);
  border-radius: 6px;
  transition: background .22s ease, padding-left .22s ease;
}

ai d:hover {
  padding-left: 9px;
  background: rgba(120, 130, 170, .06);
}

ai d::before {
  content: attr(t);
  order: -2;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3.2px;
  white-space: nowrap;
  color: var(--th);
  text-shadow: 0 1px 0 #fff;
}

ai d:not([w])::after {
  content: "";
  order: -1;
  flex: 1;
  border-bottom: 1px dotted rgba(120, 130, 170, .5);
  transform: translateY(-4px);
}

ai d[w] {
  display: block;
  flex: 1 1 100%;
  min-width: 100%;
  text-align: justify;
}

ai d[w]::before {
  display: block;
  margin-bottom: 5px;
  padding-left: 9px;
  line-height: 1.4;
  border-left: 3px solid var(--th);
}

ai tag {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1px;
  white-space: nowrap;
  color: #596482;
  background: rgba(90, 105, 155, .1);
  border: 1px solid rgba(90, 105, 155, .2);
  border-radius: 99px;
}

ai tag[s="hot"] {
  color: #a74768;
  background: rgba(200, 85, 125, .1);
  border-color: rgba(200, 85, 125, .25);
}

/* 我的 */
ai apps > details[t="me"] bd {
  background: var(--noise), linear-gradient(rgba(90, 110, 180, .05) 1px, transparent 1px) 0 0/100% 25px, linear-gradient(90deg, rgba(90, 110, 180, .05) 1px, transparent 1px) 0 0/25px 100%, linear-gradient(#fcfcfe, #f6f7fb);
}

/* ══════════════════════════════ 租客档案 ══════════════════════════════ */
ai np {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0 24px;
  width: 100%;
  margin: 15px 0 9px;
  padding: 9px 19px 15px;
  background: var(--noise), linear-gradient(165deg, #fdf8fa, #f9f3f7);
  border: 1px solid rgba(170, 80, 115, .4);
  outline: 1px solid rgba(170, 80, 115, .18);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(160, 60, 100, .06), 0 8px 20px rgba(160, 60, 100, .12);
}

ai np + np {
  margin-top: 22px;
}

ai np f {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 12px;
  padding: 13px 0 11px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  background: linear-gradient(160deg, #8d3a5c, #c96a8d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 1px solid rgba(170, 80, 115, .25);
}

ai np f::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(170, 80, 115, .35) 0 4px, transparent 4px 8px);
}

ai np em {
  order: 2;
  flex: 0 0 auto;
  padding: 2px 11px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 1.4px;
  white-space: nowrap;
  -webkit-text-fill-color: #a5788b;
  background: rgba(200, 110, 145, .1);
  border: 1px solid rgba(200, 110, 145, .25);
  border-radius: 99px;
}

/* 好感与信任 */
ai g {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 44%;
  min-width: 190px;
  padding: 11px 5px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gc);
  text-shadow: 0 1px 0 #fff;
}

ai g::before {
  content: attr(t);
  order: -2;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3.2px;
  white-space: nowrap;
  color: var(--gc);
}

ai g::after {
  content: "";
  order: -1;
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%) -100% 0/55% 100% no-repeat, linear-gradient(90deg, var(--g2), var(--gc) var(--w, 0%), var(--tk, rgba(120, 130, 170, .15)) var(--w, 0%));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15), 0 1px 0 rgba(255, 255, 255, .7);
  transform-origin: left;
  animation: aiGrow .9s .35s cubic-bezier(.22, .9, .36, 1) backwards, aiScan 3.2s 1.4s ease-in-out infinite;
}

@keyframes aiGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes aiScan {
  0%, 60% { background-position: -100% 0, 0 0; }
  100% { background-position: 210% 0, 0 0; }
}

ai g[lv="0"] { --w: 2%; }
ai g[lv="1"] { --w: 10%; }
ai g[lv="2"] { --w: 20%; }
ai g[lv="3"] { --w: 30%; }
ai g[lv="4"] { --w: 40%; }
ai g[lv="5"] { --w: 50%; }
ai g[lv="6"] { --w: 60%; }
ai g[lv="7"] { --w: 70%; }
ai g[lv="8"] { --w: 80%; }
ai g[lv="9"] { --w: 90%; }
ai g[lv="10"] { --w: 100%; }

ai g[t="好感"] { --gc: #c25d7f; --g2: #e8a4bb; }
ai g[t="信任"] { --gc: #2e8f7a; --g2: #7fccb9; }

/* 私密档案 */
ai details[x] {
  flex: 1 1 100%;
  width: 100%;
  margin: 15px 0 6px;
  overflow: hidden;
  background: var(--noise), linear-gradient(165deg, #fbf2f6, #f8edf2);
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(190, 90, 130, .3);
}

ai details[x] > summary {
  padding: 11px 19px;
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3.3px;
  color: #a13c65;
  background: linear-gradient(90deg, rgba(200, 100, 140, .16), transparent);
  transition: background .2s ease, letter-spacing .2s ease;
}

ai details[x] > summary::-webkit-details-marker {
  display: none;
}

ai details[x] > summary:hover {
  letter-spacing: 4.2px;
  background: linear-gradient(90deg, rgba(200, 100, 140, .26), transparent);
}

ai details[x] > summary::after {
  content: "查看 ▸";
  float: right;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1px;
  opacity: .6;
}

ai details[x][open] > summary::after {
  content: "收起 ▾";
}

ai details[x][open] {
  animation: aiIn .3s ease;
}

ai details[x] d {
  padding: 9px 18px;
  --th: #a13c65;
  --hair: rgba(190, 90, 130, .18);
}

ai details[x] d:last-child {
  padding-bottom: 14px;
  border-bottom: 0;
}

/* ══════════════════════════════ 攻略总览 ══════════════════════════════ */
ai r {
  display: flex;
  flex: 1 1 100%;
  width: 100%;
  font-size: 13px;
  border-bottom: 1px solid rgba(60, 130, 110, .14);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

ai r c {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  overflow-wrap: break-word;
  word-break: break-word;
}

ai r c:first-child {
  font-weight: 800;
  letter-spacing: 1px;
  color: #2e7d68;
}

ai r[h] {
  margin-top: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  background: var(--noise), linear-gradient(150deg, #2e7d68, #194f42);
  border: 0;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(30, 90, 75, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}

ai r[h] c:first-child {
  color: #fff;
}

ai r:not([h]):nth-of-type(odd) {
  background: rgba(60, 150, 125, .05);
}

ai r:not([h]):hover {
  transform: translateX(4px);
  background: rgba(60, 150, 125, .14);
  box-shadow: inset 3px 0 0 #2e7d68;
}

/* ══════════════════════════════ 棱镜 APP ══════════════════════════════ */
ai apps > details[t="pr"] bd {
  color: #c9c0e8;
  background: var(--noise), radial-gradient(80% 60% at 50% 0%, rgba(120, 85, 220, .2), transparent 60%), linear-gradient(#0c0a18, #15102d);
  border-radius: 0 0 16px 16px;
  --th: #a48aef;
  --hair: rgba(140, 110, 220, .22);
}

ai apps > details[t="pr"] d {
  color: #d7d0ed;
}

ai apps > details[t="pr"] d::before {
  color: #a48aef;
  text-shadow: 0 0 10px rgba(155, 125, 235, .45);
}

ai apps > details[t="pr"] d:not([w])::after {
  border-bottom-color: rgba(165, 140, 230, .34);
}

ai apps > details[t="pr"] d:hover {
  background: rgba(140, 110, 220, .1);
}

/* 棱镜能量 */
ai pw {
  --p1: #28203f;
  --p2: #28203f;
  --p3: #28203f;
  display: block;
  flex: 1 1 100%;
  height: 58px;
  margin: 8px 0 15px;
  background: radial-gradient(circle at 28% 50%, var(--p1) 0 8px, transparent 9px), radial-gradient(circle at 50% 50%, var(--p2) 0 8px, transparent 9px), radial-gradient(circle at 72% 50%, var(--p3) 0 8px, transparent 9px), linear-gradient(135deg, rgba(110, 75, 205, .11), rgba(30, 20, 65, .42));
  border: 1px solid rgba(140, 110, 220, .26);
  border-radius: 11px;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .22);
}

ai pw[n="0"] {
  --p1: #28203f;
  --p2: #28203f;
  --p3: #28203f;
}

ai pw[n="1"] {
  --p1: #a17be9;
  --p2: #28203f;
  --p3: #28203f;
  filter: drop-shadow(0 0 7px rgba(155, 115, 235, .55));
}

ai pw[n="2"] {
  --p1: #aa82ef;
  --p2: #aa82ef;
  --p3: #28203f;
  filter: drop-shadow(0 0 8px rgba(165, 125, 240, .62));
}

ai pw[n="3"] {
  --p1: #cbb3ff;
  --p2: #cbb3ff;
  --p3: #cbb3ff;
  filter: drop-shadow(0 0 10px rgba(195, 165, 255, .8));
}

ai pr {
  display: block;
  flex: 1 1 100%;
  width: 100%;
  margin-top: 9px;
}

ai pe {
  display: block;
  margin: 9px 0;
  padding: 14px 17px;
  background: rgba(140, 110, 220, .08);
  border: 1px solid rgba(140, 110, 220, .25);
  border-radius: 11px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

ai pe:hover {
  transform: translateY(-2px);
  background: rgba(140, 110, 220, .15);
  border-color: rgba(140, 110, 220, .48);
}

ai pn {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #bea9f5;
  text-shadow: 0 0 12px rgba(160, 130, 240, .5);
}

ai pc {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #9080bc;
}

ai pi {
  display: block;
  margin-top: 8px;
  padding: 7px 13px;
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: .4px;
  overflow-wrap: break-word;
  word-break: break-word;
  color: #e2dcf5;
  background: rgba(0, 0, 0, .22);
  border-left: 3px solid #8669d1;
  border-radius: 0 7px 7px 0;
}

ai pi + pi {
  margin-top: 6px;
}

/* ══════════════════════════════ 相册 ══════════════════════════════ */
ai apps > details[t="cg"] bd {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 21px;
  padding: 24px;
  background: var(--noise), radial-gradient(120% 90% at 50% 0%, #3a3050, #241c36 70%);
}

ai apps > details[t="cg"] bd > img {
  display: block;
  width: 100%;
  height: auto;
  background: #2c2440;
  border: 6px solid #f5f2ec;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .4s cubic-bezier(.34, 1.4, .64, 1), box-shadow .4s ease;
}

ai apps > details[t="cg"] bd > img:nth-of-type(odd) {
  transform: rotate(-1.5deg);
}

ai apps > details[t="cg"] bd > img:nth-of-type(even) {
  transform: rotate(1.5deg);
}

ai apps > details[t="cg"] bd > img:hover {
  position: relative;
  z-index: 1;
  transform: rotate(0) scale(1.07);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .5), 0 22px 44px rgba(0, 0, 0, .65), 0 0 30px rgba(180, 150, 255, .25);
}

ai lock {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 6px;
  color: rgba(225, 215, 250, .52);
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(220, 205, 250, .22);
  border-radius: 7px;
}

/* ══════════════════════════════ 星记忆回廊 ══════════════════════════════ */
ai mc {
  order: 2;
  margin-left: auto;
  padding: 2px 9px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1px;
  white-space: nowrap;
  color: rgba(255, 255, 255, .75);
  background: rgba(0, 0, 0, .18);
  border-radius: 99px;
}

ai apps > details[t="mm"] bd {
  display: block;
  counter-reset: ltm stm;
  padding: 19px;
  color: #c9d0f2;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><circle cx="20" cy="30" r="1.1" fill="white" opacity=".8"><animate attributeName="opacity" values=".8;.2;.8" dur="3s" repeatCount="indefinite"/></circle><circle cx="95" cy="70" r=".7" fill="white" opacity=".5"/><circle cx="160" cy="22" r="1" fill="white" opacity=".7"><animate attributeName="opacity" values=".7;.1;.7" dur="4s" repeatCount="indefinite"/></circle><circle cx="60" cy="150" r=".8" fill="white" opacity=".6"/><circle cx="185" cy="125" r="1" fill="white" opacity=".8"><animate attributeName="opacity" values=".8;.3;.8" dur="2.5s" repeatCount="indefinite"/></circle><circle cx="125" cy="195" r=".7" fill="white" opacity=".5"/></svg>'), radial-gradient(80% 60% at 80% 10%, rgba(90, 80, 190, .35), transparent 60%), radial-gradient(70% 55% at 10% 85%, rgba(40, 120, 140, .25), transparent 60%), #121631;
}

ai mh {
  display: block;
  margin: 17px 0 11px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 5px;
  background: linear-gradient(180deg, #cfd8ff, #8a97e0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(130, 150, 255, .5));
}

ai mh::before {
  content: "◆ ";
  font-size: 9px;
}

ai mh:first-child {
  margin-top: 0;
}

ai m {
  position: relative;
  display: block;
  margin-left: 12px;
  padding: 11px 12px 11px 34px;
  border-left: 1px solid rgba(130, 150, 255, .3);
  transition: background .25s ease, border-color .25s ease;
}

ai m:hover {
  background: linear-gradient(90deg, rgba(130, 150, 255, .12), transparent);
  border-left-color: rgba(160, 175, 255, .8);
}

ai m::before {
  counter-increment: ltm;
  content: counter(ltm);
  position: absolute;
  top: 13px;
  left: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: radial-gradient(circle at 32% 28%, #7d8af0, #3a3f8c);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(110, 120, 230, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
  animation: aiStar 3s ease-in-out infinite;
}

ai m[s]::before {
  counter-increment: stm;
  content: counter(stm);
  background: radial-gradient(circle at 32% 28%, #4bc4a5, #1e5c4d);
  box-shadow: 0 0 12px rgba(50, 190, 150, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}

@keyframes aiStar {
  0%, 100% { box-shadow: 0 0 8px rgba(110, 120, 230, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
  50% { box-shadow: 0 0 17px rgba(110, 120, 230, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
}

ai mt {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: #8a97e0;
  font-variant-numeric: tabular-nums;
}

ai ms {
  display: inline-block;
  margin: 4px 0;
  padding: 1px 10px;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: #b4bdf2;
  background: rgba(130, 150, 255, .15);
  border: 1px solid rgba(130, 150, 255, .25);
  border-radius: 5px;
}

ai me {
  display: block;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .4px;
  overflow-wrap: break-word;
  word-break: break-word;
  color: #e7ebfd;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* ══════════════════════════════ 行动推荐 ══════════════════════════════ */
ai apps > details[t="ac"] bd {
  position: relative;
  display: block;
  counter-reset: op;
  padding: 27px 21px 20px 25px;
  background: linear-gradient(90deg, transparent 32px, rgba(200, 90, 80, .35) 32px, rgba(200, 90, 80, .35) 33px, transparent 33px), repeating-linear-gradient(0deg, transparent 0 29px, rgba(160, 120, 60, .18) 29px 30px), var(--noise), linear-gradient(150deg, #fbf5e6, #f4ecd7);
  box-shadow: 0 1px 2px rgba(140, 100, 40, .08), 0 12px 28px rgba(140, 100, 40, .15), inset 0 0 0 1px rgba(255, 252, 240, .9);
}

ai apps > details[t="ac"] bd::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 96px;
  height: 20px;
  background: linear-gradient(rgba(200, 150, 95, .45), rgba(190, 140, 85, .35));
  box-shadow: 0 1px 3px rgba(120, 80, 30, .25);
  transform: translateX(-50%) rotate(-2deg);
}

ai apps > details[t="ac"] bd::after {
  content: "MEMO";
  position: absolute;
  right: 13px;
  bottom: 10px;
  padding: 1px 8px;
  font-family: var(--serif);
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(180, 60, 50, .45);
  border: 1.5px solid rgba(180, 60, 50, .35);
  border-radius: 3px;
  transform: rotate(-8deg);
}

ai o {
  position: relative;
  display: block;
  padding: 13px 35px 13px 50px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .6px;
  overflow-wrap: break-word;
  word-break: break-word;
  cursor: pointer;
  transition: background .24s ease, transform .24s ease;
}

ai o::before {
  counter-increment: op;
  content: counter(op);
  position: absolute;
  top: 50%;
  left: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: radial-gradient(circle at 32% 28%, #c99a54, #8a5f26);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(150, 105, 45, .45), inset 0 1px 0 rgba(255, 255, 255, .4);
  transform: translate(-100%, -50%) translateX(-6px);
}

ai o::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 15px;
  font-size: 21px;
  font-weight: 700;
  color: #bd9455;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .24s ease, right .24s ease;
}

ai o:hover {
  transform: translateX(6px);
  background: rgba(190, 140, 70, .1);
}

ai o:hover::after {
  right: 10px;
  opacity: 1;
}

/* ══════════════════════════════ 平板适配 ══════════════════════════════ */
@media (max-width: 720px) {
  ai {
    max-width: 100%;
    padding: 12px;
    border-radius: 18px;
  }

  ai .qbody { max-height: none; }
  ai apps { gap: 17px 14px; }
  ai ic { width: 55px; height: 55px; }
}

/* ══════════════════════════════ 手机适配 ══════════════════════════════ */
@media (max-width: 520px) {
  ai {
    padding: 8px;
    font-size: 14px;
    border-radius: 15px;
  }

  ai .qun { border-radius: 16px; }

  ai .qbar {
    min-height: 54px;
    padding: 13px 14px;
  }

  ai .qname {
    font-size: 14.5px;
    letter-spacing: 1.2px;
  }

  ai .qintro {
    margin: 15px 12px 8px;
    padding: 15px 15px 15px 41px;
    font-size: 13.5px;
    line-height: 2;
  }

  ai .qintro::before {
    top: 7px;
    left: 11px;
    font-size: 28px;
  }

  ai .qbody { padding: 19px 13px 13px; }

  ai .qmsg {
    gap: 10px;
    margin-bottom: 22px;
  }

  ai .qhead {
    width: 43px !important;
    height: 43px;
    border-radius: 11px;
  }

  ai .qcol { max-width: 79%; }

  ai .qnick {
    font-size: 10.5px;
    letter-spacing: .7px;
  }

  ai .qbub {
    padding: 10px 14px;
    font-size: 14.5px;
    line-height: 1.8;
    border-radius: 4px 15px 15px 15px;
  }

  ai .qmsg.r .qbub { border-radius: 15px 4px 15px 15px; }

  ai .qnar {
    margin: 5px 0 17px;
    padding: 12px 13px 12px 15px;
    font-size: 13px;
    line-height: 1.95;
  }

  ai .qnar.line {
    gap: 9px;
    margin: 8px 0 19px;
    padding: 0 3px;
    font-size: 12.5px;
  }

  ai .qnar.line::before,
  ai .qnar.line::after { max-width: 38px; }

  ai cg {
    max-width: 100%;
    margin: 14px auto 19px;
    padding: 6px 6px 8px;
    border-radius: 12px;
  }

  ai cg img { border-radius: 8px; }
  ai cg[t="日常"] { max-width: 260px; }

  ai cg[c]::after {
    font-size: 10.5px;
    letter-spacing: 1.2px;
  }

  ai qvo {
    min-width: 130px;
    max-width: 225px;
    padding: 10px 45px 10px 14px;
    font-size: 14px;
  }

  ai qimg {
    width: 100%;
    max-width: 285px;
  }

  ai qimg img { max-height: 430px; }

  ai qtp { margin-left: 53px; }

  ai apps {
    gap: 16px 11px;
    padding: 19px 3px 6px;
  }

  ai apps::before { letter-spacing: 4px; }

  ai ic {
    width: 51px;
    height: 51px;
    border-radius: 15px;
  }

  ai ic::before { border-radius: 14px; }
  ai ic::after { font-size: 22px; }

  ai apps > details > summary {
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: 2px;
  }

  ai apps > details[open] > summary {
    padding: 12px 14px;
    font-size: 14px;
    letter-spacing: 3px;
  }

  ai apps > details[open] > summary::before { display: none; }

  ai apps > details[open] > summary::after {
    padding: 2px 8px;
    font-size: 9.5px;
    letter-spacing: 1px;
  }

  ai bd {
    gap: 0 14px;
    padding: 12px 14px 17px;
  }

  ai d {
    flex: 1 1 100%;
    min-width: 100%;
    padding: 9px 4px;
  }

  ai d:not([w])::after { display: none; }

  ai np {
    gap: 0 14px;
    padding: 8px 13px 13px;
  }

  ai np f {
    flex-wrap: wrap;
    font-size: 18px;
    letter-spacing: 2px;
  }

  ai np f::after { display: none; }

  ai np em { margin-left: auto; }

  ai g {
    flex: 1 1 100%;
    min-width: 100%;
  }

  ai r { font-size: 11px; }
  ai r c { padding: 8px 4px; }
  ai r[h] { letter-spacing: .6px; }

  ai apps > details[t="cg"] bd {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
  }

  ai apps > details[t="cg"] bd > img { border-width: 4px; }

  ai apps > details[t="mm"] bd { padding: 14px; }

  ai mh {
    font-size: 12.5px;
    letter-spacing: 3px;
  }

  ai m {
    padding-right: 4px;
    padding-left: 29px;
  }

  ai mt { font-size: 10px; }
  ai me { font-size: 13px; }

  ai o {
    padding: 12px 30px 12px 45px;
    font-size: 13.5px;
  }
}

/* ══════════════════════════════ 窄屏适配 ══════════════════════════════ */
@media (max-width: 370px) {
  ai .qhead {
    width: 39px !important;
    height: 39px;
  }

  ai .qcol { max-width: 80%; }
  ai .qbub { font-size: 14px; }

  ai .qnar {
    padding: 11px 11px 11px 13px;
    font-size: 12.5px;
    text-indent: 1.6em;
  }

  ai cg[t="日常"] { max-width: 100%; }

  ai apps { gap: 14px 8px; }

  ai ic {
    width: 47px;
    height: 47px;
  }

  ai apps > details > summary {
    font-size: 10px;
    letter-spacing: 1px;
  }

  ai apps > details[t="cg"] bd { grid-template-columns: 1fr; }
}
/* 相册：仅作用于直系img，避免误伤 */
ai apps > details[t="cg"] bd > img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  background:#2c2440;
  border:6px solid #f5f2ec;
  border-radius:3px;
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 12px 26px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);
  transition:transform .4s cubic-bezier(.34,1.4,.64,1),box-shadow .4s ease;
}

ai apps > details[t="cg"] bd > img:nth-of-type(odd){transform:rotate(-1.5deg);}
ai apps > details[t="cg"] bd > img:nth-of-type(even){transform:rotate(1.5deg);}

ai apps > details[t="cg"] bd > img:hover{
  position:relative;
  z-index:1;
  transform:rotate(0) scale(1.07);
  box-shadow:0 4px 8px rgba(0,0,0,.5),0 22px 44px rgba(0,0,0,.65),0 0 30px rgba(180,150,255,.25);
}

/* 相册空态 */
ai apps > details[t="cg"] bd:empty::before{
  content:"尚 无 已 解 锁 立 绘";
  grid-column:1/-1;
  padding:44px 0;
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:5px;
  text-align:center;
  color:rgba(225,215,250,.38);
}

/* ═══════════════════════════════════════════════════════════════
   G L I T C H   R E T R O  ·  RILI NEW CHAT DOM ADAPTER
   适配新版：nav/header + #prompt-input 系列结构
   CRT扫描线 × RGB色差 × 霓虹残影 × 硬边切角
   ═══════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;500;600;700&family=VT323&display=swap");


/* ──────────────────────────────────────────────────────────────
   0. 通用动画
   ────────────────────────────────────────────────────────────── */

@keyframes gr-crt-roll{
  0%{
    background-position:0 0,0 0;
  }
  100%{
    background-position:0 3px,0 0;
  }
}

@keyframes gr-tear-shift{
  0%,72%,100%{
    transform:translateX(0) scaleY(1);
    opacity:1;
  }

  74%{
    transform:translateX(-9px) scaleY(2.2);
    opacity:.5;
  }

  76%{
    transform:translateX(7px) scaleY(.4);
    opacity:.9;
  }

  78%{
    transform:translateX(-4px) scaleY(1.6);
    opacity:.6;
  }

  80%{
    transform:translateX(0) scaleY(1);
    opacity:1;
  }
}

@keyframes gr-box-glitch{
  0%,100%{
    transform:translate(-2px,-2px);
  }

  50%{
    transform:translate(-1px,-3px);
  }
}

@keyframes gr-text-glitch{
  0%,88%,100%{
    text-shadow:
      -1.5px 0 rgba(255,45,120,.85),
       1.5px 0 rgba(0,240,255,.85),
       0 0 12px rgba(0,240,255,.6);
    transform:translateX(0);
  }

  90%{
    text-shadow:
      -4px 0 rgba(255,45,120,1),
       4px 0 rgba(0,240,255,1),
       0 0 18px rgba(255,45,120,.8);
    transform:translateX(2px);
  }

  92%{
    text-shadow:
       3px 0 rgba(255,230,0,.9),
      -3px 0 rgba(176,38,255,.9);
    transform:translateX(-2px);
  }

  94%{
    text-shadow:
      -1.5px 0 rgba(255,45,120,.85),
       1.5px 0 rgba(0,240,255,.85);
    transform:translateX(1px);
  }
}

@keyframes gr-dot-glitch{
  0%,100%{
    transform:translate(0,0) scale(1);
  }

  25%{
    transform:translate(1.5px,-1px) scale(1.25);
  }

  50%{
    transform:translate(-1.5px,1px) scale(.85);
  }

  75%{
    transform:translate(1px,1px) scale(1.15);
  }
}

@keyframes gr-send-pulse{
  0%,100%{
    box-shadow:
      3px 3px 0 rgba(0,240,255,.75),
      0 0 22px rgba(255,45,120,.5);
  }

  50%{
    box-shadow:
      3px 3px 0 rgba(0,240,255,.95),
      0 0 32px rgba(255,45,120,.78);
  }
}


/* ──────────────────────────────────────────────────────────────
   1. 新版顶部导航栏
   ────────────────────────────────────────────────────────────── */

header.flex.h-12.items-center.justify-between{
  position:relative!important;
  isolation:isolate!important;

  background:
    radial-gradient(
      120% 90% at 50% -20%,
      rgba(255,60,140,.16),
      transparent 55%
    ),
    radial-gradient(
      90% 110% at 4% 100%,
      rgba(0,230,255,.18),
      transparent 60%
    ),
    linear-gradient(
      174deg,
      #0d0a18 0%,
      #16102a 45%,
      #0a0714 100%
    )!important;

  border:none!important;
  border-bottom:0!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.72),
    0 1px 0 #ff2d78,
    0 2px 0 rgba(0,240,255,.50),
    0 6px 20px rgba(255,45,120,.22),
    0 16px 48px rgba(5,3,12,.60)!important;

  backdrop-filter:blur(18px) saturate(1.7)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.7)!important;

  overflow:hidden!important;
}


/* CRT 扫描线 */

header.flex.h-12.items-center.justify-between::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:0;

  pointer-events:none;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.27) 0,
      rgba(0,0,0,.27) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,45,120,.032) 0 2px,
      rgba(0,240,255,.032) 2px 4px
    );

  animation:gr-crt-roll 8s linear infinite;
}


/* 底部霓虹撕裂线 */

header.flex.h-12.items-center.justify-between::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      #00f0ff 8%,
      #ff2d78 22%,
      #ffe600 38%,
      #ff2d78 55%,
      #00f0ff 72%,
      #b026ff 88%,
      transparent 100%
    );

  filter:
    blur(.4px)
    drop-shadow(0 0 8px rgba(255,45,120,.9));

  animation:gr-tear-shift 3.4s steps(12) infinite;
}


/* 顶栏真实控件高于扫描线 */

header.flex.h-12.items-center.justify-between > *{
  position:relative!important;
  z-index:2!important;
}


/* ──────────────────────────────────────────────────────────────
   2. 顶栏左 / 右图标按钮
   ────────────────────────────────────────────────────────────── */

#nav-left button,
#nav-right button{
  position:relative!important;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.22) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      140deg,
      rgba(0,240,255,.10),
      rgba(255,45,120,.055)
    )!important;

  border:
    1px solid rgba(0,240,255,.34)!important;

  border-radius:0!important;

  clip-path:
    polygon(
      7px 0,
      100% 0,
      100% calc(100% - 7px),
      calc(100% - 7px) 100%,
      0 100%,
      0 7px
    )!important;

  box-shadow:
    inset 0 0 14px rgba(0,240,255,.12),
    2px 2px 0 rgba(255,45,120,.30)!important;

  transition:
    transform .18s steps(3),
    border-color .18s steps(3),
    box-shadow .18s steps(3)!important;
}

#nav-left button:hover,
#nav-right button:hover{
  border-color:#ff2d78!important;

  transform:
    translate(-2px,-2px)!important;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.22) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      140deg,
      rgba(255,45,120,.12),
      rgba(0,240,255,.07)
    )!important;

  box-shadow:
    inset 0 0 20px rgba(255,45,120,.18),
    4px 4px 0 rgba(0,240,255,.52),
    0 0 22px rgba(255,45,120,.45)!important;
}

#nav-left button:active,
#nav-right button:active{
  transform:
    translate(0,0)!important;

  box-shadow:
    inset 0 0 12px rgba(0,240,255,.12),
    1px 1px 0 rgba(255,45,120,.45)!important;
}


/* 图标 */

#nav-left button svg,
#nav-right button svg{
  color:#7df9ff!important;
  stroke:#7df9ff!important;
  fill:none!important;

  opacity:1!important;

  filter:
    drop-shadow(1px 0 0 rgba(255,45,120,.65))
    drop-shadow(-1px 0 0 rgba(0,240,255,.65))
    drop-shadow(0 0 8px rgba(0,240,255,.48))!important;

  transition:
    all .18s steps(3)!important;
}

#nav-left button:hover svg,
#nav-right button:hover svg{
  color:#ff2d78!important;
  stroke:#ff2d78!important;
  fill:none!important;

  transform:
    scale(1.22)
    rotate(-10deg)!important;

  filter:
    drop-shadow(2px 0 0 rgba(0,240,255,.90))
    drop-shadow(-2px 0 0 rgba(255,230,0,.85))
    drop-shadow(0 0 15px rgba(255,45,120,.95))!important;
}


/* 公告数字角标 */

#nav-right button span.absolute.rounded-full{
  font-family:
    "Share Tech Mono",
    "SFMono-Regular",
    Consolas,
    monospace!important;

  color:#1a1030!important;

  background:#ffe600!important;

  border:
    1px solid #0d0a18!important;

  border-radius:0!important;

  clip-path:
    polygon(
      4px 0,
      100% 0,
      100% calc(100% - 4px),
      calc(100% - 4px) 100%,
      0 100%,
      0 4px
    )!important;

  box-shadow:
    2px 0 0 rgba(255,45,120,.90),
    -2px 0 0 rgba(0,240,255,.90),
    0 0 16px rgba(255,230,0,1)!important;

  animation:
    gr-dot-glitch
    1.2s
    steps(4)
    infinite!important;
}


/* ──────────────────────────────────────────────────────────────
   3. 底部输入区外层
   ────────────────────────────────────────────────────────────── */

div.relative.z-50.w-full.shrink-0:has(#prompt-input){
  position:relative!important;

  padding-top:18px!important;

  padding-bottom:
    max(
      10px,
      env(safe-area-inset-bottom)
    )!important;

  background:
    linear-gradient(
      to top,
      rgba(240,236,250,.995) 18%,
      rgba(240,236,250,.92) 52%,
      rgba(240,236,250,.48) 78%,
      transparent 100%
    )!important;

  backdrop-filter:
    blur(12px)
    saturate(1.2)!important;

  -webkit-backdrop-filter:
    blur(12px)
    saturate(1.2)!important;
}

div.relative.z-50.w-full.shrink-0:has(#prompt-input)::before{
  content:"";

  position:absolute;

  left:10%;
  right:10%;
  top:9px;

  height:1px;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,240,255,.70),
      rgba(255,45,120,.85),
      rgba(255,230,0,.60),
      rgba(0,240,255,.70),
      transparent
    );

  filter:
    drop-shadow(
      0 0 7px
      rgba(255,45,120,.45)
    );
}


/* ──────────────────────────────────────────────────────────────
   4. 主输入卡
   ────────────────────────────────────────────────────────────── */

#prompt-input{
  position:relative!important;

  background:
    transparent!important;

  border-radius:
    0!important;
}

#prompt-input > [data-slot="input-group"]{
  position:relative!important;

  isolation:isolate!important;

  width:100%!important;

  height:auto!important;

  min-height:122px!important;

  overflow:hidden!important;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(20,10,35,.036) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      158deg,
      #fff 0%,
      #f4eefc 45%,
      #eae2f8 100%
    )!important;

  border:
    2px solid #1a1030!important;

  border-radius:
    0!important;

  outline:
    none!important;

  clip-path:
    polygon(
      14px 0,
      100% 0,
      100% calc(100% - 14px),
      calc(100% - 14px) 100%,
      0 100%,
      0 14px
    )!important;

  box-shadow:
    4px 4px 0 rgba(255,45,120,.65),
    8px 8px 0 rgba(0,240,255,.35)!important;

  transition:
    transform .20s steps(3),
    box-shadow .20s steps(3),
    border-color .20s steps(3)!important;
}

#prompt-input > [data-slot="input-group"]:focus-within{
  border-color:
    #ff2d78!important;

  transform:
    translate(-2px,-2px)!important;

  box-shadow:
    6px 6px 0 rgba(255,45,120,.90),
    12px 12px 0 rgba(0,240,255,.55),
    0 0 34px rgba(255,45,120,.30)!important;
}


/* 输入卡内部淡扫描线 */

#prompt-input > [data-slot="input-group"]::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:0;

  pointer-events:none;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(20,10,35,.028) 2px 3px
    ),
    linear-gradient(
      90deg,
      rgba(0,240,255,.025),
      transparent 18% 82%,
      rgba(255,45,120,.025)
    );
}


/* 输入卡底部故障线 */

#prompt-input > [data-slot="input-group"]::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      #00f0ff 16%,
      #ff2d78 38%,
      #ffe600 56%,
      #b026ff 74%,
      transparent
    );

  opacity:.82;

  filter:
    drop-shadow(
      0 0 6px
      rgba(255,45,120,.55)
    );
}


/* 内容浮在装饰层上 */

#prompt-input > [data-slot="input-group"] > *{
  position:relative!important;
  z-index:2!important;
}


/* ──────────────────────────────────────────────────────────────
   5. 顶部工具栏
   模组 / 评论 / 滚到底部 / 图片
   ────────────────────────────────────────────────────────────── */

#prompt-input-header{
  padding:
    8px
    10px
    2px!important;

  color:
    #2a1a4a!important;

  background:
    transparent!important;
}


/* 横向滚动条 */

#prompt-input-header > .w-full.overflow-x-auto{
  scrollbar-width:thin;

  scrollbar-color:
    #ff2d78
    transparent;
}

#prompt-input-header > .w-full.overflow-x-auto::-webkit-scrollbar{
  height:4px;
}

#prompt-input-header > .w-full.overflow-x-auto::-webkit-scrollbar-track{
  background:
    transparent;
}

#prompt-input-header > .w-full.overflow-x-auto::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      90deg,
      #00f0ff,
      #ff2d78
    );

  border-radius:0;
}


/* 顶部工具按钮 */

#prompt-input-header button{
  position:relative!important;

  min-height:30px!important;

  font-family:
    "Rajdhani",
    "Noto Sans SC",
    "Microsoft YaHei",
    sans-serif!important;

  font-size:12px!important;

  font-weight:700!important;

  letter-spacing:
    1.5px!important;

  color:
    #1a1030!important;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(20,10,35,.04) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      150deg,
      #fff 0%,
      #f2ecfb 100%
    )!important;

  border:
    2px solid #1a1030!important;

  border-radius:
    0!important;

  clip-path:
    polygon(
      8px 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 8px
    )!important;

  box-shadow:
    2px 2px 0 rgba(255,45,120,.66),
    4px 4px 0 rgba(0,240,255,.32)!important;

  transition:
    all .18s steps(3)!important;

  overflow:
    hidden!important;
}

#prompt-input-header button::after{
  content:"";

  position:absolute;

  top:0;
  bottom:0;

  left:-65%;

  width:42%;

  pointer-events:none;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,45,120,.25),
      rgba(0,240,255,.26),
      transparent
    );

  transform:
    skewX(-24deg);

  transition:
    left .45s steps(7);
}

#prompt-input-header button:hover::after{
  left:145%;
}

#prompt-input-header button:hover{
  color:
    #ff2d78!important;

  border-color:
    #ff2d78!important;

  transform:
    translate(-2px,-2px)!important;

  text-shadow:
    -1px 0 rgba(0,240,255,.72),
     1px 0 rgba(255,230,0,.52)!important;

  box-shadow:
    4px 4px 0 rgba(255,45,120,.88),
    8px 8px 0 rgba(0,240,255,.48),
    0 0 22px rgba(255,45,120,.28)!important;
}

#prompt-input-header button:active{
  transform:
    translate(0,0)!important;

  box-shadow:
    1px 1px 0 rgba(255,45,120,.88),
    2px 2px 0 rgba(0,240,255,.42)!important;
}


/* 顶部工具栏图标 */

#prompt-input-header button svg{
  color:#5a2ea8!important;

  stroke:#5a2ea8!important;

  transition:
    all .18s steps(3)!important;
}

#prompt-input-header button:hover svg{
  color:#ff2d78!important;

  stroke:#ff2d78!important;

  transform:
    scale(1.17)
    rotate(-8deg)!important;

  filter:
    drop-shadow(1px 0 0 rgba(0,240,255,.75))
    drop-shadow(-1px 0 0 rgba(255,230,0,.55))!important;
}


/* 模组 */

#prompt-input-header button:has(svg.lucide-package){
  color:#17304a!important;

  border-color:
    #00a9ba!important;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(20,10,35,.035) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      150deg,
      #f8ffff 0%,
      #def8fb 100%
    )!important;

  box-shadow:
    2px 2px 0 rgba(0,240,255,.62),
    4px 4px 0 rgba(255,45,120,.30)!important;
}

#prompt-input-header button:has(svg.lucide-package) svg{
  color:#00a9ba!important;

  stroke:#00a9ba!important;

  filter:
    drop-shadow(
      0 0 5px
      rgba(0,240,255,.40)
    )!important;
}


/* 评论 */

#prompt-input-header button:has(svg.lucide-message-circle) svg{
  color:#d41f68!important;
  stroke:#d41f68!important;
}


/* 图片 */

#prompt-input-header button:has(svg.lucide-image-plus) svg{
  color:#7440ba!important;
  stroke:#7440ba!important;
}


/* 滚到底部 */

#prompt-input-header button[aria-label="滚动到底部"] svg{
  color:#5a2ea8!important;
  stroke:#5a2ea8!important;
}

#prompt-input-header button[aria-label="滚动到底部"]:hover svg{
  transform:
    translateY(3px)
    scale(1.12)!important;
}


/* ──────────────────────────────────────────────────────────────
   6. 输入正文
   ────────────────────────────────────────────────────────────── */

#prompt-input-body{
  position:relative!important;
}

#prompt-input-body textarea[name="message"]{
  position:relative!important;

  z-index:2!important;

  min-height:52px!important;

  max-height:200px!important;

  padding:
    12px
    14px
    10px!important;

  font-family:
    "Rajdhani",
    "Noto Sans SC",
    "Microsoft YaHei",
    sans-serif!important;

  font-size:16px!important;

  font-weight:500!important;

  line-height:1.72!important;

  letter-spacing:
    .65px!important;

  color:
    #160c2e!important;

  caret-color:
    #ff2d78!important;

  background:
    transparent!important;

  border:
    0!important;

  border-radius:
    0!important;

  box-shadow:
    none!important;

  outline:
    none!important;

  resize:
    none!important;
}

#prompt-input-body textarea[name="message"]::placeholder{
  font-family:
    "Share Tech Mono",
    "SFMono-Regular",
    Consolas,
    monospace!important;

  font-size:
    13px!important;

  letter-spacing:
    1.45px!important;

  text-transform:
    uppercase!important;

  color:
    rgba(90,46,168,.50)!important;

  opacity:
    1!important;
}

#prompt-input-body textarea[name="message"]::selection{
  color:#fff!important;

  background:
    #ff2d78!important;
}


/* textarea scrollbar */

#prompt-input-body textarea[name="message"]::-webkit-scrollbar{
  width:6px!important;
}

#prompt-input-body textarea[name="message"]::-webkit-scrollbar-track{
  background:
    rgba(26,16,48,.06)!important;
}

#prompt-input-body textarea[name="message"]::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      #ff2d78,
      #b026ff
    )!important;

  border-radius:
    0!important;

  box-shadow:
    0 0 8px
    rgba(255,45,120,.38)!important;
}

#prompt-input-body textarea[name="message"]::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      #00f0ff,
      #ff2d78
    )!important;
}


/* ──────────────────────────────────────────────────────────────
   7. 底部控制栏
   ────────────────────────────────────────────────────────────── */

#prompt-input-footer{
  padding:
    5px
    10px
    10px!important;

  color:
    #39245e!important;

  background:
    transparent!important;
}

#prompt-input-footer > div{
  min-width:0!important;
}

#prompt-input-footer button{
  position:relative!important;

  border-radius:
    0!important;

  transition:
    all .18s steps(3)!important;
}


/* 设置 / 信息 */

#prompt-input-footer button:has(svg.lucide-settings),
#prompt-input-footer button:has(svg.lucide-info){
  background:
    linear-gradient(
      140deg,
      rgba(0,240,255,.08),
      rgba(255,45,120,.045)
    )!important;

  border:
    1px solid rgba(90,46,168,.48)!important;

  clip-path:
    polygon(
      6px 0,
      100% 0,
      100% calc(100% - 6px),
      calc(100% - 6px) 100%,
      0 100%,
      0 6px
    )!important;

  box-shadow:
    inset 0 0 12px rgba(0,240,255,.08),
    2px 2px 0 rgba(255,45,120,.28)!important;
}

#prompt-input-footer button:has(svg.lucide-settings):hover,
#prompt-input-footer button:has(svg.lucide-info):hover{
  border-color:
    #ff2d78!important;

  transform:
    translate(-2px,-2px)!important;

  box-shadow:
    inset 0 0 16px rgba(255,45,120,.15),
    4px 4px 0 rgba(0,240,255,.46),
    0 0 18px rgba(255,45,120,.26)!important;
}

#prompt-input-footer button:has(svg.lucide-settings) svg,
#prompt-input-footer button:has(svg.lucide-info) svg{
  color:#5a2ea8!important;

  stroke:#5a2ea8!important;

  transition:
    all .20s steps(3)!important;
}

#prompt-input-footer button:has(svg.lucide-settings):hover svg{
  color:#ff2d78!important;

  stroke:#ff2d78!important;

  transform:
    rotate(150deg)
    scale(1.15)!important;

  filter:
    drop-shadow(
      0 0 8px
      rgba(255,45,120,.55)
    )!important;
}

#prompt-input-footer button:has(svg.lucide-info):hover svg{
  color:#00a9ba!important;

  stroke:#00a9ba!important;

  transform:
    scale(1.17)!important;

  filter:
    drop-shadow(
      0 0 8px
      rgba(0,240,255,.48)
    )!important;
}


/* ──────────────────────────────────────────────────────────────
   8. 模型选择器
   新版：footer 内包含模型 logo 的 button
   ────────────────────────────────────────────────────────────── */

#prompt-input-footer button:has(img){
  position:relative!important;

  min-width:0!important;

  max-width:100%!important;

  padding:
    5px
    10px!important;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.30) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      140deg,
      rgba(0,240,255,.10),
      rgba(255,45,120,.06)
    ),
    #100a1d!important;

  border:
    1px solid rgba(0,240,255,.46)!important;

  border-radius:
    0!important;

  clip-path:
    polygon(
      8px 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 8px
    )!important;

  box-shadow:
    inset 0 0 16px rgba(0,240,255,.15),
    0 0 12px rgba(0,240,255,.22),
    2px 2px 0 rgba(255,45,120,.34)!important;

  transition:
    all .18s steps(3)!important;
}

#prompt-input-footer button:has(img):hover{
  border-color:
    #ff2d78!important;

  transform:
    translate(-2px,-2px)!important;

  box-shadow:
    inset 0 0 22px rgba(255,45,120,.20),
    0 0 18px rgba(255,45,120,.48),
    4px 4px 0 rgba(0,240,255,.56)!important;

  animation:
    gr-box-glitch
    .30s
    steps(2)
    infinite!important;
}

#prompt-input-footer button:has(img) img{
  opacity:
    .95!important;

  filter:
    drop-shadow(1px 0 0 rgba(255,45,120,.55))
    drop-shadow(-1px 0 0 rgba(0,240,255,.55))
    drop-shadow(0 0 6px rgba(0,240,255,.30))!important;

  transition:
    all .18s steps(3)!important;
}

#prompt-input-footer button:has(img):hover img{
  transform:
    scale(1.15)
    rotate(-5deg)!important;

  filter:
    drop-shadow(2px 0 0 rgba(255,45,120,.88))
    drop-shadow(-2px 0 0 rgba(0,240,255,.88))
    drop-shadow(0 0 9px rgba(255,45,120,.50))!important;
}

#prompt-input-footer button:has(img) span{
  min-width:0!important;

  font-family:
    "Orbitron",
    "Rajdhani",
    "Noto Sans SC",
    sans-serif!important;

  font-size:
    11px!important;

  font-weight:
    700!important;

  letter-spacing:
    1.6px!important;

  color:
    #dff8ff!important;

  text-shadow:
    -1.2px 0 rgba(255,45,120,.78),
     1.2px 0 rgba(0,240,255,.78),
     0 0 10px rgba(0,240,255,.48)!important;

  animation:
    gr-text-glitch
    4.8s
    steps(1)
    infinite!important;
}


/* ──────────────────────────────────────────────────────────────
   9. 回复模式
   ────────────────────────────────────────────────────────────── */

#prompt-input-footer button[aria-haspopup="menu"]{
  padding-inline:
    8px!important;

  color:
    #39245e!important;

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.88),
      rgba(236,228,249,.95)
    )!important;

  border:
    1px solid rgba(90,46,168,.50)!important;

  border-radius:
    0!important;

  clip-path:
    polygon(
      6px 0,
      100% 0,
      100% calc(100% - 6px),
      calc(100% - 6px) 100%,
      0 100%,
      0 6px
    )!important;

  box-shadow:
    2px 2px 0 rgba(255,45,120,.30)!important;
}

#prompt-input-footer button[aria-haspopup="menu"]:hover{
  color:
    #ff2d78!important;

  border-color:
    #ff2d78!important;

  transform:
    translate(-2px,-2px)!important;

  box-shadow:
    4px 4px 0 rgba(0,240,255,.48),
    0 0 18px rgba(255,45,120,.26)!important;
}

#prompt-input-footer button[aria-haspopup="menu"] svg{
  color:#5a2ea8!important;

  stroke:#5a2ea8!important;

  transition:
    all .18s steps(3)!important;
}

#prompt-input-footer button[aria-haspopup="menu"]:hover svg{
  color:#00a9ba!important;

  stroke:#00a9ba!important;

  transform:
    scale(1.16)!important;

  filter:
    drop-shadow(
      0 0 8px
      rgba(0,240,255,.48)
    )!important;
}

#prompt-input-footer button[aria-haspopup="menu"] span{
  font-family:
    "Share Tech Mono",
    "SFMono-Regular",
    Consolas,
    monospace!important;

  font-size:
    11px!important;

  letter-spacing:
    1.2px!important;
}


/* ──────────────────────────────────────────────────────────────
   10. 发送按钮
   ────────────────────────────────────────────────────────────── */

#prompt-input-footer button[type="submit"]{
  position:relative!important;

  flex:
    0 0 auto!important;

  width:
    30px!important;

  height:
    30px!important;

  min-width:
    30px!important;

  min-height:
    30px!important;

  padding:
    0!important;

  overflow:
    hidden!important;

  color:
    #fff!important;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.20) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      150deg,
      #ff2d78 0%,
      #d41f68 50%,
      #b026ff 100%
    )!important;

  border:
    2px solid #ffe600!important;

  border-radius:
    0!important;

  clip-path:
    polygon(
      8px 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 8px
    )!important;

  box-shadow:
    3px 3px 0 rgba(0,240,255,.75),
    0 0 22px rgba(255,45,120,.50)!important;

  transition:
    all .18s steps(3)!important;

  animation:
    gr-send-pulse
    2.8s
    steps(7)
    infinite!important;
}

#prompt-input-footer button[type="submit"]::before{
  content:"";

  position:absolute;

  top:0;
  bottom:0;

  left:-65%;

  width:46%;

  pointer-events:none;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,255,255,.78),
      transparent
    );

  transform:
    skewX(-24deg);

  transition:
    left .42s steps(7);
}

#prompt-input-footer button[type="submit"]:hover::before{
  left:
    145%;
}

#prompt-input-footer button[type="submit"]:hover{
  border-color:
    #00f0ff!important;

  transform:
    translate(-3px,-3px)!important;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.18) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      150deg,
      #ff397f 0%,
      #c625ff 100%
    )!important;

  box-shadow:
    6px 6px 0 rgba(0,240,255,.90),
    0 0 36px rgba(255,45,120,.78)!important;

  animation:
    none!important;
}

#prompt-input-footer button[type="submit"]:active{
  transform:
    translate(0,0)!important;

  box-shadow:
    1px 1px 0 rgba(0,240,255,.90)!important;
}

#prompt-input-footer button[type="submit"] svg{
  position:relative!important;

  z-index:2!important;

  color:#fff!important;

  stroke:#fff!important;

  filter:
    drop-shadow(1.5px 0 0 rgba(255,230,0,.80))
    drop-shadow(-1.5px 0 0 rgba(0,240,255,.80))!important;

  transition:
    transform .20s steps(4)!important;
}

#prompt-input-footer button[type="submit"]:hover svg{
  transform:
    translate(-2px,2px)
    rotate(4deg)
    scale(1.14)!important;
}

#prompt-input-footer button[type="submit"]:disabled{
  opacity:
    .42!important;

  filter:
    saturate(.55)!important;

  animation:
    none!important;

  transform:
    none!important;

  box-shadow:
    1px 1px 0 rgba(0,240,255,.30),
    0 0 8px rgba(255,45,120,.16)!important;
}


/* ──────────────────────────────────────────────────────────────
   11. Footer 文字与聚焦状态
   ────────────────────────────────────────────────────────────── */

#prompt-input-footer .text-xs{
  font-family:
    "Share Tech Mono",
    "SFMono-Regular",
    Consolas,
    monospace!important;
}

#prompt-input-footer button,
#prompt-input-header button{
  -webkit-tap-highlight-color:
    transparent!important;
}

#prompt-input-footer button:focus-visible,
#prompt-input-header button:focus-visible{
  outline:
    none!important;

  box-shadow:
    0 0 0 1px #0d0a18,
    0 0 0 3px rgba(0,240,255,.70),
    4px 4px 0 rgba(255,45,120,.55)!important;
}


/* ──────────────────────────────────────────────────────────────
   12. 输入区微型故障装饰
   ────────────────────────────────────────────────────────────── */

#prompt-input-header::after{
  content:"";

  display:block;

  width:100%;

  height:1px;

  margin-top:
    5px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,240,255,.30) 12%,
      rgba(255,45,120,.38) 45%,
      rgba(255,230,0,.30) 62%,
      transparent
    );
}

#prompt-input-footer::before{
  content:"";

  position:absolute;

  left:10px;
  right:10px;
  top:0;

  height:1px;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(90,46,168,.20),
      rgba(255,45,120,.28),
      rgba(0,240,255,.22),
      transparent
    );
}


/* ──────────────────────────────────────────────────────────────
   13. 兼容性后备
   ────────────────────────────────────────────────────────────── */

#prompt-input-body textarea{
  caret-color:
    #ff2d78!important;

  background:
    transparent!important;

  border-radius:
    0!important;

  box-shadow:
    none!important;
}

#prompt-input-footer button img{
  flex:
    0 0 auto!important;
}

#prompt-input-footer svg{
  transition:
    all .18s steps(3)!important;
}


/* ──────────────────────────────────────────────────────────────
   14. 移动端适配
   ────────────────────────────────────────────────────────────── */

@media (max-width:768px){

  header.flex.h-12.items-center.justify-between{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -2px 0 rgba(0,0,0,.70),
      0 1px 0 #ff2d78,
      0 2px 0 rgba(0,240,255,.45),
      0 8px 28px rgba(5,3,12,.45)!important;
  }

  #nav-left button,
  #nav-right button{
    box-shadow:
      inset 0 0 10px rgba(0,240,255,.10),
      1px 1px 0 rgba(255,45,120,.30)!important;
  }

  div.relative.z-50.w-full.shrink-0:has(#prompt-input){
    padding-top:
      12px!important;

    padding-left:
      3px!important;

    padding-right:
      3px!important;
  }

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

    clip-path:
      polygon(
        10px 0,
        100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 10px
      )!important;

    box-shadow:
      3px 3px 0 rgba(255,45,120,.62),
      6px 6px 0 rgba(0,240,255,.30)!important;
  }

  #prompt-input > [data-slot="input-group"]:focus-within{
    transform:
      translate(-1px,-1px)!important;

    box-shadow:
      4px 4px 0 rgba(255,45,120,.84),
      8px 8px 0 rgba(0,240,255,.46),
      0 0 24px rgba(255,45,120,.24)!important;
  }

  #prompt-input-header{
    padding:
      7px
      7px
      2px!important;
  }

  #prompt-input-header button{
    min-height:
      28px!important;

    font-size:
      11px!important;

    letter-spacing:
      .8px!important;

    box-shadow:
      2px 2px 0 rgba(255,45,120,.55),
      3px 3px 0 rgba(0,240,255,.24)!important;
  }

  #prompt-input-body textarea[name="message"]{
    min-height:
      48px!important;

    padding:
      10px
      10px
      8px!important;

    font-size:
      15px!important;

    line-height:
      1.65!important;
  }

  #prompt-input-body textarea[name="message"]::placeholder{
    font-size:
      12px!important;

    letter-spacing:
      .9px!important;
  }

  #prompt-input-footer{
    padding:
      4px
      7px
      8px!important;
  }

  #prompt-input-footer button:has(img){
    padding-inline:
      7px!important;
  }

  #prompt-input-footer button:has(img) span{
    font-size:
      10px!important;

    letter-spacing:
      .9px!important;
  }

  #prompt-input-footer button[aria-haspopup="menu"]{
    padding-inline:
      6px!important;
  }

  #prompt-input-footer button[type="submit"]{
    width:
      29px!important;

    height:
      29px!important;

    min-width:
      29px!important;

    min-height:
      29px!important;
  }
}


/* ──────────────────────────────────────────────────────────────
   15. 减少动画偏好
   ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){

  header.flex.h-12.items-center.justify-between::before,
  header.flex.h-12.items-center.justify-between::after,
  #nav-right button span.absolute.rounded-full,
  #prompt-input-footer button:has(img) span,
  #prompt-input-footer button:has(img):hover,
  #prompt-input-footer button[type="submit"]{
    animation:
      none!important;
  }

  #nav-left button,
  #nav-right button,
  #prompt-input-header button,
  #prompt-input-footer button,
  #prompt-input > [data-slot="input-group"]{
    transition:
      none!important;
  }
}