:root {
  --bubble-window-blue-1: rgba(239, 252, 255, .98);
  --bubble-window-blue-2: rgba(153, 218, 247, .94);
  --bubble-window-blue-3: rgba(88, 169, 218, .72);
  --bubble-window-blue-border: rgba(73, 150, 202, .68);
  --bubble-window-pink-1: rgba(255, 246, 252, .96);
  --bubble-window-pink-2: rgba(244, 190, 221, .72);
  --bubble-window-pink-border: rgba(219, 139, 186, .52);
  --bubble-window-surface: rgba(252, 254, 255, .94);
  --bubble-window-ink: #175784;
  --bubble-window-radius: clamp(22px, 2.2vw, 34px);
  --bubble-window-inner-radius: clamp(16px, 1.7vw, 26px);
  --bubble-window-title-height: 38px;
  --bubble-window-gap: clamp(7px, .8vw, 12px);
}

.bubble-window {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: clamp(12px, 3vw, 34px);
  --bubble-window-origin-x: 50vw;
  --bubble-window-origin-y: 50vh;
  opacity: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
  contain: layout paint;
}

.bubble-window[hidden] {
  display: none !important;
}

.bubble-window__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(126, 200, 238, .18);
  backdrop-filter: blur(2.5px) saturate(1.08);
  -webkit-backdrop-filter: blur(2.5px) saturate(1.08);
  cursor: inherit;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.bubble-window__shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--bubble-window-title-height) minmax(0, 1fr);
  width: min(86vw, 980px);
  height: min(84dvh, 760px);
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid var(--bubble-window-blue-border);
  border-radius: var(--bubble-window-radius);
  color: var(--bubble-window-ink);
  background:
    linear-gradient(116deg, rgba(255,255,255,.76) 0 9%, transparent 27%),
    linear-gradient(180deg, var(--bubble-window-blue-1), var(--bubble-window-blue-2) 64%, rgba(201,235,249,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -2px 5px rgba(44,121,173,.18),
    0 16px 42px rgba(31,91,137,.24),
    0 0 0 1px rgba(255,255,255,.48),
    0 0 28px rgba(126,215,255,.22);
  overflow: hidden;
  transform-origin: var(--bubble-window-origin-x) var(--bubble-window-origin-y);
}

.bubble-window__shell::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 1px 10% auto;
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  pointer-events: none;
}

.bubble-window__outer-titlebar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 5px 0 14px;
  border: 1px solid rgba(90,160,205,.54);
  border-radius: calc(var(--bubble-window-radius) - 7px) calc(var(--bubble-window-radius) - 7px) 12px 12px;
  background: linear-gradient(180deg, rgba(247,254,255,.9), rgba(132,202,236,.72));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(51,128,181,.18);
  font: 700 12px/1 "Bubble Archive Pixel", ui-monospace, monospace;
  letter-spacing: .08em;
  font-synthesis: none;
}

.bubble-window__outer-titlebar > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bubble-window__close {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 31px;
  height: 28px;
  padding: 0 0 2px;
  border: 1px solid rgba(64,136,189,.52);
  border-radius: 50% 46% 52% 45%;
  color: #246d9f;
  background: radial-gradient(circle at 35% 25%, #fff 0 12%, rgba(240,252,255,.94) 27%, rgba(135,207,240,.74) 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.96), 0 2px 4px rgba(43,111,160,.18);
  font: 20px/1 Arial, sans-serif;
  cursor: inherit;
  transition: filter 150ms ease, transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 150ms ease;
}

.bubble-window__close:hover,
.bubble-window__close:focus-visible {
  filter: brightness(1.07);
  box-shadow: inset 0 1px 2px #fff, 0 0 12px rgba(100,208,255,.72);
}
.bubble-window__close:focus-visible { outline: 2px solid rgba(112,218,255,.92); outline-offset: 2px; }
.bubble-window__close:active { transform: translateY(2px) scale(.94); }

.bubble-window__inner {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--bubble-window-gap);
  margin-top: 4px;
  padding: var(--bubble-window-gap);
  border: 1px solid var(--bubble-window-pink-border);
  border-radius: var(--bubble-window-inner-radius);
  background:
    linear-gradient(132deg, rgba(255,255,255,.78) 0 12%, transparent 31%),
    linear-gradient(180deg, var(--bubble-window-pink-1), var(--bubble-window-pink-2));
  box-shadow: inset 0 2px 3px rgba(255,255,255,.9), inset 0 -2px 4px rgba(190,107,157,.13);
  overflow: hidden;
}

.bubble-window__inner-title {
  min-width: 0;
  margin: 0;
  padding: 7px 12px 6px;
  border: 1px solid rgba(222,151,192,.42);
  border-radius: calc(var(--bubble-window-inner-radius) - 7px);
  color: #7d4972;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,224,241,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
  font: 700 clamp(13px, 1.25vw, 18px)/1.25 Arial, sans-serif;
  letter-spacing: .025em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.bubble-window__content {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  border: 1px solid rgba(130,179,209,.42);
  border-radius: calc(var(--bubble-window-inner-radius) - 6px);
  background: var(--bubble-window-surface);
  box-shadow: inset 0 1px 3px rgba(69,130,171,.12), inset 0 0 0 1px rgba(255,255,255,.82);
  overflow: auto;
}

.bubble-window__shell--panel {
  width: min(88vw, 590px);
  height: auto;
  max-height: min(82dvh, 720px);
}
.bubble-window__shell--panel .bubble-window__content { padding: clamp(18px, 2.4vw, 30px); }

.bubble-window.is-opening .bubble-window__shell { animation: bubbleWindowInflate 420ms cubic-bezier(.16,.84,.24,1.08) both; }
.bubble-window.is-opening .bubble-window__inner { animation: bubbleWindowInnerReveal 320ms 105ms cubic-bezier(.2,.8,.2,1) both; }
.bubble-window.is-closing .bubble-window__shell { animation: bubbleWindowDeflate 260ms cubic-bezier(.55,.05,.75,.3) both; }

@keyframes bubbleWindowInflate {
  0% { opacity:0; clip-path:circle(8px at var(--bubble-window-origin-x) var(--bubble-window-origin-y)); transform:scale(.18); }
  58% { opacity:1; transform:scale(1.025); }
  100% { opacity:1; clip-path:inset(0 round var(--bubble-window-radius)); transform:scale(1); }
}
@keyframes bubbleWindowInnerReveal { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes bubbleWindowDeflate { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(.16); border-radius:50%; } }

.bubble-window-connected { display:grid; place-items:center; min-height:180px; text-align:center; color:#2479ad; font:700 clamp(22px,4vw,38px)/1.1 Arial,sans-serif; text-shadow:0 0 14px rgba(107,205,248,.55); }
.bubble-window-connected::after { content:""; width:10px; height:10px; margin-top:16px; border:1px solid rgba(61,165,220,.7); border-radius:50%; box-shadow:16px -5px 0 -2px rgba(102,198,240,.55),30px 2px 0 -3px rgba(154,218,247,.5); }

@media (max-width:700px) {
  :root { --bubble-window-title-height: 36px; --bubble-window-gap: 7px; }
  .bubble-window { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .bubble-window__shell,
  .bubble-window__shell--panel { width:100%; max-width:430px; max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius:24px; }
  .bubble-window__shell:not(.bubble-window__shell--panel) { height:min(78dvh,680px); }
  .bubble-window__outer-titlebar { padding-left:11px; border-radius:18px 18px 10px 10px; font-size:10px; letter-spacing:.055em; }
  .bubble-window__close { width:32px; height:30px; }
  .bubble-window__inner { border-radius:18px; }
  .bubble-window__inner-title { padding:7px 9px; border-radius:12px; font-size:clamp(13px,4.2vw,17px); line-height:1.25; }
  .bubble-window__content { border-radius:12px; }
  .bubble-window__shell--panel .bubble-window__content { padding:16px; }
}

@media (prefers-reduced-motion:reduce) {
  .bubble-window.is-opening .bubble-window__shell,
  .bubble-window.is-opening .bubble-window__inner,
  .bubble-window.is-closing .bubble-window__shell { animation-duration:80ms !important; clip-path:none !important; transform:none !important; }
}

/* BUBBLE WINDOW SYSTEM v1 — pixel visual correction */
@font-face {
  font-family:"Bubble Window Pixel";
  src:url("品牌素材/中文像素字体.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+2E80-2EFF,U+3000-303F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;
}
@font-face {
  font-family:"Bubble Window Pixel";
  src:url("品牌素材/英文像素字体.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F;
}

:root {
  --bubble-window-aqua:#35d9e7;
  --bubble-window-aqua-dark:#087ea6;
  --bubble-window-aqua-highlight:#d8ffff;
  --bubble-window-pink:#f24aa3;
  --bubble-window-pink-dark:#a91468;
  --bubble-window-pink-highlight:#ffb9df;
  --bubble-window-content:#fff8fc;
  --bubble-window-pixel-border:3px;
  --bubble-window-shadow:7px 8px 0 rgba(69,15,83,.25);
  --bubble-window-title-height:42px;
  --bubble-window-step:9px;
}

.bubble-window,.bubble-window * { font-family:"Bubble Window Pixel",ui-monospace,monospace; font-synthesis:none; }
.bubble-window__backdrop { background:rgba(77,197,232,.18); backdrop-filter:blur(2px) saturate(1.12); -webkit-backdrop-filter:blur(2px) saturate(1.12); }
.bubble-window__shell {
  grid-template-rows:var(--bubble-window-title-height) minmax(0,1fr);
  padding:var(--bubble-window-pixel-border);
  border:var(--bubble-window-pixel-border) solid var(--bubble-window-aqua-dark);
  border-radius:12px;
  background:var(--bubble-window-pink);
  box-shadow:inset 3px 3px 0 var(--bubble-window-aqua-highlight),inset -3px -3px 0 #075c86,0 0 0 3px rgba(255,255,255,.88),0 0 0 5px var(--bubble-window-pink-dark),var(--bubble-window-shadow);
  clip-path:polygon(var(--bubble-window-step) 0,calc(100% - var(--bubble-window-step)) 0,calc(100% - var(--bubble-window-step)) 3px,100% 3px,100% calc(100% - var(--bubble-window-step)),calc(100% - 3px) calc(100% - var(--bubble-window-step)),calc(100% - 3px) 100%,var(--bubble-window-step) 100%,var(--bubble-window-step) calc(100% - 3px),0 calc(100% - 3px),0 var(--bubble-window-step),3px var(--bubble-window-step),3px 3px,var(--bubble-window-step) 3px);
}
.bubble-window__shell::before { left:8px; right:8px; top:7px; height:3px; border-radius:0; background:rgba(225,255,255,.88); box-shadow:0 3px 0 rgba(255,255,255,.32); }
.bubble-window__outer-titlebar {
  margin:0;
  padding:0 5px 0 15px;
  border:0;
  border-bottom:3px solid var(--bubble-window-aqua-dark);
  border-radius:6px 6px 0 0;
  color:#075b86;
  background:linear-gradient(180deg,#78f5f3 0 18%,var(--bubble-window-aqua) 19% 69%,#13b7d2 70% 100%);
  box-shadow:inset 3px 0 0 var(--bubble-window-aqua-highlight),inset -3px 0 0 #0789ad,inset 0 -3px 0 rgba(5,98,136,.34);
  font-size:14px;
  line-height:1;
  letter-spacing:.055em;
}
.bubble-window__outer-titlebar > span { text-shadow:1px 1px 0 rgba(255,255,255,.72); }
.bubble-window__close {
  width:31px;
  height:29px;
  border:3px solid #8e155e;
  border-radius:3px;
  color:#7e1658;
  background:#ff72bb;
  box-shadow:inset 3px 3px 0 #ffc1e3,inset -3px -3px 0 #ce2e83,2px 2px 0 rgba(5,101,139,.35);
  font-family:"Bubble Window Pixel",ui-monospace,monospace;
  font-size:20px;
  transition:filter 110ms steps(2,end),transform 180ms cubic-bezier(.2,.8,.2,1),box-shadow 110ms steps(2,end);
}
.bubble-window__close:hover,.bubble-window__close:focus-visible { filter:brightness(1.12) saturate(1.08); box-shadow:inset 3px 3px 0 #fff0fa,inset -3px -3px 0 #c51d78,0 0 0 3px rgba(220,255,255,.84),3px 3px 0 rgba(5,101,139,.35); }
.bubble-window__close:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.bubble-window__close:active { transform:translate(2px,2px) scale(.96); box-shadow:inset 2px 2px 0 #c51d78,inset -2px -2px 0 #ffc1e3; }
.bubble-window__inner {
  gap:0;
  margin:0;
  padding:7px;
  border:0;
  border-radius:0 0 6px 6px;
  background:linear-gradient(135deg,rgba(255,255,255,.28) 0 8%,transparent 8% 100%),var(--bubble-window-pink);
  box-shadow:inset 3px 0 0 var(--bubble-window-pink-highlight),inset -3px -3px 0 var(--bubble-window-pink-dark);
}
.bubble-window__inner-title {
  padding:8px 12px 7px;
  border:3px solid var(--bubble-window-pink-dark);
  border-bottom:0;
  border-radius:3px 3px 0 0;
  color:#7c154f;
  background:#ff88c5;
  box-shadow:inset 3px 3px 0 var(--bubble-window-pink-highlight),inset -3px 0 0 #d82d86;
  font-size:clamp(14px,1.35vw,19px);
  line-height:1.25;
  letter-spacing:.018em;
  text-align:center;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.bubble-window__content {
  border:3px solid var(--bubble-window-pink-dark);
  border-radius:0 0 3px 3px;
  color:#602052;
  background:linear-gradient(rgba(241,105,171,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(52,208,224,.06) 1px,transparent 1px),var(--bubble-window-content);
  background-size:8px 8px,8px 8px,auto;
  box-shadow:inset 3px 3px 0 #ffd3e9,inset -3px -3px 0 #eeb0d0;
}
.bubble-window-connected { min-height:150px; color:#b5166b; font-size:clamp(24px,4vw,40px); line-height:1.1; text-shadow:2px 2px 0 #ffd1e9,0 0 12px rgba(52,216,231,.5); }
.bubble-window-connected::after { border:2px solid #078daf; box-shadow:16px -5px 0 -2px #35d9e7,30px 2px 0 -3px #f24aa3; }

@media(max-width:700px) {
  :root { --bubble-window-title-height:39px; --bubble-window-step:7px; }
  .bubble-window__shell,.bubble-window__shell--panel { border-radius:9px; }
  .bubble-window__outer-titlebar { padding-left:10px; border-radius:4px 4px 0 0; font-size:11px; letter-spacing:.035em; }
  .bubble-window__close { width:34px; height:31px; }
  .bubble-window__inner { border-radius:0 0 4px 4px; padding:6px; }
  .bubble-window__inner-title { padding:7px 8px 6px; border-radius:2px 2px 0 0; font-size:clamp(13px,4vw,17px); line-height:1.3; text-wrap:balance; }
  .bubble-window__content { border-radius:0 0 2px 2px; }
  .bubble-window__shell--panel .bubble-window__content { padding:15px; }
}

/* v1 third correction — translucent aqua pixel skin */
:root {
  --bubble-window-aqua:rgba(31,218,232,.84);
  --bubble-window-aqua-dark:#128aae;
  --bubble-window-aqua-highlight:rgba(224,255,255,.94);
  --bubble-window-inner-blue:rgba(78,195,237,.58);
  --bubble-window-inner-blue-strong:rgba(62,195,237,.76);
  --bubble-window-edge:#198fb3;
  --bubble-window-content:rgba(240,252,255,.88);
  --bubble-window-pink-accent:#f04b9f;
  --bubble-window-pixel-border:2px;
  --bubble-window-shadow:2px 3px 0 rgba(23,111,151,.3);
}

.bubble-window__backdrop { background:rgba(93,202,232,.14); backdrop-filter:blur(1.6px) saturate(1.08); -webkit-backdrop-filter:blur(1.6px) saturate(1.08); }
.bubble-window__shell {
  border-color:var(--bubble-window-edge);
  background:rgba(43,190,224,.38);
  box-shadow:inset 2px 2px 0 var(--bubble-window-aqua-highlight),inset -2px -2px 0 rgba(16,132,171,.58),0 0 0 2px rgba(214,252,255,.82),var(--bubble-window-shadow);
}
.bubble-window__shell::before { height:2px; background:rgba(235,255,255,.88); box-shadow:none; }
.bubble-window__outer-titlebar {
  border-bottom:2px solid var(--bubble-window-edge);
  color:#075f86;
  background:linear-gradient(180deg,rgba(112,247,247,.92) 0 18%,var(--bubble-window-aqua) 19% 72%,rgba(12,176,211,.82) 73% 100%);
  box-shadow:inset 2px 0 0 var(--bubble-window-aqua-highlight),inset -2px 0 0 rgba(7,137,173,.74),inset 0 -2px 0 rgba(5,98,136,.25);
  line-height:1.25;
}
.bubble-window__close {
  border:2px solid var(--bubble-window-edge);
  color:#075f86;
  background:rgba(70,204,235,.82);
  box-shadow:inset 2px 2px 0 rgba(220,255,255,.95),inset -2px -2px 0 rgba(17,137,180,.62),1px 1px 0 rgba(7,91,127,.28);
}
.bubble-window__close:hover,.bubble-window__close:focus-visible { filter:brightness(1.08) saturate(1.08); box-shadow:inset 2px 2px 0 #edffff,inset -2px -2px 0 rgba(17,137,180,.7),0 0 0 2px rgba(103,231,255,.92),1px 1px 0 rgba(7,91,127,.28); }
.bubble-window__close:focus-visible { outline:2px solid #8beaff; outline-offset:2px; }
.bubble-window__close:active { box-shadow:inset 2px 2px 0 rgba(17,137,180,.7),inset -1px -1px 0 #edffff; }
.bubble-window__inner {
  background:linear-gradient(135deg,rgba(255,255,255,.22) 0 8%,transparent 8% 100%),var(--bubble-window-inner-blue);
  box-shadow:inset 2px 0 0 rgba(214,252,255,.8),inset -2px -2px 0 rgba(18,133,176,.46);
}
.bubble-window__inner-title {
  border:2px solid var(--bubble-window-edge);
  border-bottom:0;
  color:#075d86;
  background:var(--bubble-window-inner-blue-strong);
  box-shadow:inset 2px 2px 0 rgba(224,255,255,.82),inset -2px 0 0 rgba(17,133,177,.46);
}
.bubble-window__content {
  border:2px solid var(--bubble-window-edge);
  color:#174f73;
  background:linear-gradient(rgba(30,171,207,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(30,171,207,.03) 1px,transparent 1px),var(--bubble-window-content);
  background-size:10px 10px,10px 10px,auto;
  box-shadow:inset 2px 2px 0 rgba(224,251,255,.88),inset -2px -2px 0 rgba(80,170,205,.32);
}
.bubble-window-connected { color:#087ba4; line-height:1.3; text-shadow:1px 1px 0 rgba(225,255,255,.9),0 0 8px rgba(52,216,231,.36); }
.bubble-window-connected::after { display:none; }