:root {
  --ink: #0c4a6e;
  --soft: #0369a1;
  --card: rgba(255, 255, 255, 0.82);
  --shadow: 0 14px 40px rgba(14, 116, 144, 0.18);
  --font: "PingFang SC", "Microsoft YaHei", "Nunito", sans-serif;
  --display: "PingFang SC", "Microsoft YaHei", "Fredoka", sans-serif;
  --danger: #be123c;
}
* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body {
  margin: 0; height: 100%; font-family: var(--font); color: var(--ink);
  /* Page never scrolls sideways — only the bubble strip may */
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  max-width: 100%;
}
body {
  min-height: 100dvh;
  min-height: var(--app-h, 100dvh);
  background: linear-gradient(165deg, #7dd3fc, #38bdf8 45%, #0284c7);
  touch-action: pan-y;
  position: relative;
}
.bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.4) 0 8%, transparent 9%),
    radial-gradient(circle at 82% 72%, rgba(255, 255, 255, 0.22) 0 10%, transparent 11%);
}
.plus-pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(14,165,233,.2);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.75rem;
  line-height: 1.45;
  max-height: 360px;
  overflow: auto;
  margin: 0 0 8px;
}
.plus-key-box {
  background: #fef9c3;
  border-radius: 12px;
  padding: 8px 10px;
  line-height: 1.5;
}
.plus-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.plus-tab.on, .plus-guide-tab.on { background: #e0f2fe; }

.auth-stage { width: min(400px, 100%); }
.auth-hero { display: none; }
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ver-chip {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  color: #fff;
}
.mode-dock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.speaker-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  flex-shrink: 0;
}
.speaker-btn svg { display: block; }
.composer-dock { width: 100%; }
.side-actions { display: flex; flex-direction: column; gap: 8px; }
.welcome-kicker {
  margin: 0 0 10px;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--soft);
}

/* Auth */
.auth-gate {
  position: relative; z-index: 2; min-height: 100dvh;
  display: grid; place-items: center; padding: 1.25rem;
}
.auth-lang-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 5;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0369a1 !important;
  border: 1px solid rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.18);
}
.auth-card {
  width: min(400px, 100%);
  background: var(--card); backdrop-filter: blur(14px);
  border-radius: 22px; padding: 1.35rem 1.25rem;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.7rem;
}
.auth-card .badge {
  align-self: flex-start; padding: 6px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #fff;
  font-size: 0.8rem; font-weight: 800;
}
.auth-card h1 {
  margin: 0; font-family: var(--display); font-size: 1.55rem;
}
.sub { margin: 0; color: var(--soft); font-size: 0.88rem; font-weight: 700; line-height: 1.45; }
.tabs { display: flex; gap: 6px; }
.tab {
  flex: 1; border: 0; border-radius: 12px; padding: 0.5rem;
  font: inherit; font-weight: 800; cursor: pointer;
  background: rgba(255, 255, 255, 0.55); color: var(--soft);
}
.tab.on { background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #fff; }
label {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.82rem; font-weight: 800; color: var(--soft);
}
.remember-row {
  flex-direction: row !important;
  align-items: center;
  gap: 0.45rem !important;
  font-size: 0.86rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.remember-row input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}
input, textarea, select {
  font: inherit; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 12px; padding: 0.55rem 0.7rem; outline: none;
}
.primary, .ghost, button {
  border: 0; border-radius: 14px; font: inherit; font-weight: 800; cursor: pointer;
}
a.primary, a.ghost {
  display: inline-block;
  text-decoration: none;
  line-height: 1.2;
}
.primary {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #fff;
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.35); padding: 11px 14px;
}
.ghost {
  background: rgba(255, 255, 255, 0.55); color: var(--soft);
  padding: 10px 12px; border: 1px solid rgba(14, 165, 233, 0.18);
}
.full { width: 100%; }
.err { color: var(--danger); margin: 0; font-weight: 800; font-size: 0.88rem; }

/* App shell — same as family-assistant */
.layout {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 280px 1fr;
  height: 100dvh; max-width: min(1280px, 100%); margin: 0 auto;
  width: 100%; overflow-x: hidden; min-width: 0;
}
.sidebar {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, 0.35); overflow: hidden; min-height: 0;
}
.side-top { display: flex; flex-direction: column; gap: 8px; }
.brand {
  font-family: var(--display); font-size: 1.15rem; color: var(--ink);
  padding: 4px 2px;
}
.who { font-weight: 800; color: var(--soft); padding: 0 4px; font-size: 0.9rem; }
.mini { font-size: 0.72rem; color: var(--soft); font-weight: 700; padding: 0 4px; }
.chat-list-wrap { flex: 1; min-height: 0; overflow: auto; }
.side-foot {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.chats {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.chats li {
  background: var(--card); border-radius: 14px; padding: 10px 12px;
  box-shadow: var(--shadow); border: 2px solid transparent;
  cursor: pointer; font-size: 0.9rem; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chats li.on { border-color: #0ea5e9; }

.main {
  display: grid; grid-template-rows: auto 1fr auto;
  min-width: 0; height: 100dvh;
  width: 100%; max-width: 100%; overflow-x: hidden;
  background: rgba(255, 255, 255, 0.22);
  position: relative;
}
.top {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45); flex-wrap: nowrap;
  z-index: 25;
}
.top-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.top-title strong {
  display: block; font-family: var(--display); font-size: 1.05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-title small { color: var(--soft); font-weight: 700; font-size: 0.75rem; }
.top-controls {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin-left: auto;
}
.top-hotzone {
  display: none;
}
.icon-btn {
  display: none; padding: 8px 10px; min-width: 42px;
  align-items: center; justify-content: center;
}
.model {
  max-width: min(168px, 36vw);
  border: 1px solid rgba(14, 165, 233, 0.28); border-radius: 14px;
  padding: 8px 12px; font: inherit; font-weight: 700;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
}
#modeSelect { max-width: min(108px, 26vw); }

/* Desktop: floating top bar, slide in from top edge */
@media (min-width: 861px) {
  .main,
  html.top-autohide .main {
    grid-template-rows: 1fr auto;
  }
  .top-hotzone,
  html.top-autohide .top-hotzone {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 20px;
    z-index: 40;
  }
  .top,
  html.top-autohide .top {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(560px, calc(100% - 32px));
    margin-top: 10px;
    transform: translate3d(-50%, -120%, 0);
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    padding: 8px 12px;
    gap: 8px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
      0 12px 32px rgba(2, 132, 199, 0.16),
      0 1px 0 rgba(255, 255, 255, 0.9) inset;
    backdrop-filter: blur(18px);
    z-index: 41;
    will-change: transform;
    transition:
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.38s;
  }
  .main.top-revealed .top,
  html.top-autohide.top-revealed .top,
  html.top-autohide .main.top-revealed .top {
    transform: translate3d(-50%, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition:
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }
  .top-title strong { font-size: 0.92rem; letter-spacing: 0.01em; }
  .top-title small { display: none; }
  .model {
    max-width: min(150px, 28vw);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.86rem;
    background: rgba(240, 249, 255, 0.95);
    border: 1px solid rgba(14, 165, 233, 0.2);
    box-shadow: none;
  }
  #modeSelect { max-width: 96px; }
  .messages { padding-top: 14px; }
}

.messages {
  overflow-x: hidden; overflow-y: auto; padding: 18px 18px 10px;
  display: flex; flex-direction: column; gap: 12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  max-width: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
}
.messages > .bubble {
  max-width: min(720px, 92%);
}
.bubble {
  max-width: min(760px, 94%); padding: 12px 14px; border-radius: 18px;
  box-shadow: var(--shadow); line-height: 1.55; font-weight: 700;
  word-break: break-word;
}
.bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #fff; white-space: pre-wrap;
}
.bubble-attach-preview {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px;
}
.bubble-attach-preview img {
  max-width: min(220px, 70vw); max-height: 180px;
  border-radius: 12px; object-fit: cover;
  background: rgba(255,255,255,.25);
  display: block;
}
.bubble-file-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  width: min(280px, 86vw);
  max-width: 100%;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.22);
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.3);
  box-sizing: border-box;
}
.bubble.user .bubble-file-card { color: #fff; }
.bubble-file-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.bubble-file-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,.28);
}
.bubble-file-meta { min-width: 0; flex: 1; }
.bubble-file-name {
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bubble-file-sub {
  font-size: 0.72rem;
  opacity: 0.85;
  font-weight: 650;
  margin-top: 1px;
}
.bubble-file-preview {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0.95;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px 9px;
  border-radius: 10px;
  min-height: 72px;
  background: rgba(0,0,0,.16);
}
.bubble-file-preview[hidden] { display: none !important; }
.attach-file-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}
.bubble.user .bubble-text { white-space: pre-wrap; word-break: break-word; }
.bubble.assistant {
  align-self: flex-start; background: var(--card);
}
.tool-card {
  display: none !important;
}
.tool-card .name { color: #0369a1; font-weight: 800; }
.tool-card pre {
  margin: 6px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.78rem;
  opacity: 0.9;
}
.bubble .thinking {
  color: rgba(12, 74, 110, 0.55);
  font-size: 0.86rem;
  line-height: 1.45;
  font-weight: 600;
  margin-bottom: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed rgba(14, 165, 233, 0.28);
  white-space: pre-wrap;
}
.bubble .thinking:empty { display: none; }
.bubble .answer { white-space: pre-wrap; }
.bubble .answer .md { white-space: normal; line-height: 1.55; }

/* Live thinking / tool status — 3 blue bubbles swap clockwise; top-right is largest */
.popo-think {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  min-height: 36px;
  user-select: none;
}
.popo-think[hidden] { display: none !important; }
.popo-think-orb {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  overflow: hidden;
  background: #cfefff;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.18);
}
.popo-think-icon { display: none !important; }
.popo-think-spin {
  position: absolute;
  inset: 0;
}
.popo-think-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.popo-think-bubbles i {
  position: absolute;
  border-radius: 50%;
  margin: 0;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), transparent 42%),
    radial-gradient(circle at 72% 72%, rgba(14,165,233,.35), transparent 55%),
    linear-gradient(145deg, #7dd3fc, #38bdf8 45%, #0284c7);
  box-shadow:
    inset 0 0 5px rgba(255,255,255,.6),
    0 2px 5px rgba(2, 132, 199, 0.3);
  will-change: left, top, width, height;
  animation: popo-bubble-cycle 2.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
/* Three bubbles, phase-shifted so they chase clockwise */
.popo-think-bubbles .pb-a { animation-delay: 0s; }
.popo-think-bubbles .pb-b { animation-delay: -0.7s; }
.popo-think-bubbles .pb-c { animation-delay: -1.4s; }
.popo-think-label {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0369a1;
  letter-spacing: 0.02em;
  /* Static label only — only the bubble icon animates */
}
/* Slots (clockwise): top-right LARGE → bottom MED → left SMALL → top-right */
@keyframes popo-bubble-cycle {
  0%, 100% {
    left: 17px; top: 3px;
    width: 16px; height: 16px;
  }
  16% {
    left: 17px; top: 3px;
    width: 16px; height: 16px;
  }
  33% {
    left: 12px; top: 20px;
    width: 12px; height: 12px;
  }
  49% {
    left: 12px; top: 20px;
    width: 12px; height: 12px;
  }
  66% {
    left: 3px; top: 14px;
    width: 9px; height: 9px;
  }
  82% {
    left: 3px; top: 14px;
    width: 9px; height: 9px;
  }
}
.studio-open-btn {
  display: inline-block;
  margin: 4px 6px 4px 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: #059669;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none !important;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.28);
}
.studio-open-btn:hover { filter: brightness(1.08); }
.studio-dl-btn {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(3, 105, 161, 0.12);
  color: #0369a1 !important;
  font-weight: 800;
  text-decoration: none !important;
  font-size: 0.8rem;
}
.studio-files { width: 100%; }


.composer {
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  overflow-x: hidden; max-width: 100%;
  touch-action: pan-y;
}
.sys { margin-bottom: 8px; font-weight: 800; color: var(--soft); font-size: 0.85rem; }
.sys summary { cursor: pointer; }
.sys textarea {
  width: 100%; margin-top: 6px;
  border: 1px solid rgba(14, 165, 233, 0.22); border-radius: 14px;
  padding: 10px 12px; font: inherit; font-weight: 700; resize: vertical;
  outline: none; background: rgba(255, 255, 255, 0.9);
}
.composer-tools {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  flex-wrap: wrap;
}
.tools-spacer { flex: 1; min-width: 4px; }
.mode-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(14, 165, 233, 0.28);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.08);
}
.mode-chip {
  appearance: none;
  border: 0;
  background: transparent;
  color: #0369a1;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
}
.mode-chip.on {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  color: #fff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28);
}
.mode-chip[data-mode="work"].on {
  background: linear-gradient(135deg, #10b981, #0d9488);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}
.mode-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.mode-chip:not(.on):not(:disabled):hover {
  background: rgba(14, 165, 233, 0.12);
}
/* ONLY this strip may scroll horizontally; rest of UI is locked */
.quick-bubbles-wrap {
  position: relative;
  margin: 0 0 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  overflow: hidden;
  max-width: 100%;
  touch-action: pan-x;
}
.quick-bubbles-viewport {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 28px 8px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x !important; /* override body pan-y */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  cursor: grab;
}
.quick-bubbles-viewport.is-dragging { cursor: grabbing; user-select: none; }
.quick-bubbles-viewport::-webkit-scrollbar { display: none; }
.quick-bubbles-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-width: 100%;
}
.quick-bubbles-hint {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 8px 0 20px;
  font-size: 0.68rem; font-weight: 800; color: #0369a1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(224, 242, 254, 0.98) 45%);
  opacity: 0.95;
  transition: opacity 0.2s ease;
}
.quick-bubbles-wrap.is-end .quick-bubbles-hint { opacity: 0; }
.glass-bubble {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 7px 13px;
  font: inherit; font-size: 0.78rem; font-weight: 800;
  color: #0c4a6e;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(224, 242, 254, 0.55) 45%,
    rgba(186, 230, 253, 0.4) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(14, 165, 233, 0.12),
    0 4px 14px rgba(12, 74, 110, 0.1);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.glass-bubble:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 18px rgba(14, 165, 233, 0.18);
}
.glass-bubble:active { transform: translateY(0); }
.chat-item-row {
  display: flex; align-items: center; gap: 6px; width: 100%;
}
.chat-item-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chat-item-row .chip {
  flex-shrink: 0; border: 0; background: transparent; cursor: pointer;
  font-size: 0.72rem; font-weight: 800; color: #0369a1; padding: 2px 4px;
}
.chat-item-row .chip.del { color: #be123c; }
.send-queue-island[hidden] { display: none !important; }
.send-queue-island {
  width: 100%;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.send-queue-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  max-width: 100%;
  border: 1px solid rgba(14, 165, 233, 0.28);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-radius 0.2s ease, width 0.2s ease;
}
.send-queue-pill:active { transform: scale(0.97); }
.send-queue-island.is-open { align-items: stretch; }
.send-queue-island.is-open .send-queue-pill {
  width: 100%;
  justify-content: space-between;
  border-radius: 18px 18px 0 0;
  box-shadow: none;
  border-bottom-color: transparent;
}
.send-queue-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #0ea5e9;
  box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.55);
  animation: sendQueuePulse 1.6s ease-out infinite;
}
.send-queue-label { white-space: nowrap; }
.send-queue-chev {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; opacity: 0.7;
}
.send-queue-island.is-open .send-queue-chev { transform: rotate(-135deg); margin-top: 3px; }
.send-queue-panel {
  display: none;
  width: 100%;
  max-height: 168px;
  overflow: auto;
  border: 1px solid rgba(14, 165, 233, 0.28);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.12);
}
.send-queue-island.is-open .send-queue-panel { display: block; }
.send-queue-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px 4px; font-size: 0.75rem; color: var(--soft);
}
.send-queue-clear {
  border: 0; background: none; cursor: pointer; font: inherit; font-weight: 800;
  color: var(--danger); padding: 4px 6px;
}
.send-queue-list { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.send-queue-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.16);
  cursor: grab;
}
.send-queue-item:active { cursor: grabbing; }
.send-queue-item.is-drag { opacity: 0.45; }
.send-queue-moves { display: flex; flex-direction: column; gap: 2px; }
.send-queue-moves button:disabled { opacity: 0.28; cursor: default; }
.send-queue-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.82rem; font-weight: 800;
}
.send-queue-del {
  width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: transparent; color: var(--danger); font-weight: 900; cursor: pointer;
}
@keyframes sendQueuePulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}
.compose-row {
  display: flex; align-items: flex-end; gap: 8px; width: 100%;
}
.input-slot {
  flex: 1; min-width: 0; position: relative; display: flex;
}
.input-slot textarea, .hold-talk {
  width: 100%;
  border: 1px solid rgba(14, 165, 233, 0.22); border-radius: 14px;
  padding: 10px 12px; font: inherit; font-weight: 700; outline: none;
  background: rgba(255, 255, 255, 0.9); min-height: 44px; max-height: 120px;
  box-sizing: border-box;
}
.input-slot textarea { resize: none; line-height: 1.4; }
.hold-talk {
  display: none; align-items: center; justify-content: center; cursor: pointer;
  user-select: none; -webkit-user-select: none; touch-action: none; color: var(--soft);
  margin: 0;
}
.compose-row.voice-mode .input-slot textarea { display: none !important; }
.compose-row.voice-mode .hold-talk { display: flex !important; }
.hold-talk.pressing {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #fff;
  border-color: transparent;
}
.send-btn {
  flex-shrink: 0; padding: 10px 14px; min-height: 44px; white-space: nowrap;
}
.model-orb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}
.model-orb-wrap::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.45), rgba(124,58,237,.18) 55%, transparent 70%);
  opacity: .55;
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
  animation: orbHalo 2.8s ease-in-out infinite;
}
.model-orb-wrap.pro::before {
  background: radial-gradient(circle, rgba(16,185,129,.5), rgba(20,184,166,.22) 52%, rgba(56,189,248,.16) 68%, transparent 75%);
}
.model-orb-wrap.ultra::before {
  background: radial-gradient(circle, rgba(245,158,11,.5), rgba(239,68,68,.22) 50%, rgba(124,58,237,.15) 68%, transparent 75%);
}
.model-orb-wrap.open::before {
  opacity: .95;
  animation-duration: 1.4s;
}
.model-orb {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  isolation: isolate;
  z-index: 1;
  transition: transform .25s cubic-bezier(.22,1.2,.36,1);
}
.model-orb:active {
  transform: scale(.94);
}
.model-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from var(--orb-deg, 0deg),
      #38bdf8, #22d3ee, #a78bfa, #f472b6, #38bdf8);
  animation: orbSpin 3.6s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 6px rgba(56,189,248,.45));
}
.model-orb[data-key="pro"] .model-orb-ring {
  background: conic-gradient(from var(--orb-deg, 0deg), #10b981, #22d3ee, #38bdf8, #34d399, #10b981);
  filter: drop-shadow(0 0 7px rgba(16,185,129,.48));
}
.model-orb[data-key="ultra"] .model-orb-ring {
  background: conic-gradient(from var(--orb-deg, 0deg), #f59e0b, #f472b6, #8b5cf6, #22d3ee, #f59e0b);
  filter: drop-shadow(0 0 7px rgba(245,158,11,.5));
}
.model-orb-spark {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.9), transparent 42%);
  pointer-events: none;
  animation: orbGlow 1.8s ease-in-out infinite;
  z-index: 2;
}
.model-orb-core {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 0.82rem/1 "Fredoka", "PingFang SC", sans-serif;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(145deg, #0ea5e9, #2563eb 58%, #7c3aed);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 6px rgba(15,23,42,.18),
    0 6px 16px rgba(14, 165, 233, .42),
    0 0 0 1px rgba(255,255,255,.12);
  transition: transform .25s cubic-bezier(.22,1.2,.36,1), box-shadow .25s ease;
  z-index: 1;
}
.model-orb[data-key="pro"] .model-orb-core {
  background: linear-gradient(145deg, #14b8a6, #059669 55%, #0ea5e9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 6px rgba(15,23,42,.18),
    0 6px 16px rgba(16, 185, 129, .42),
    0 0 0 1px rgba(255,255,255,.12);
}
.model-orb[data-key="ultra"] .model-orb-core {
  background: linear-gradient(145deg, #f59e0b, #ef4444 52%, #7c3aed);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 6px rgba(15,23,42,.18),
    0 6px 16px rgba(245, 158, 11, .45),
    0 0 0 1px rgba(255,255,255,.12);
}
.model-orb:hover .model-orb-core,
.model-orb-wrap.open .model-orb-core {
  transform: scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 8px 22px rgba(14, 165, 233, .55),
    0 0 24px rgba(124, 58, 237, .35);
}
.model-orb[data-key="pro"]:hover .model-orb-core,
.model-orb-wrap.pro.open .model-orb-core {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 8px 22px rgba(16, 185, 129, .55),
    0 0 24px rgba(14, 165, 233, .28);
}
.model-orb[data-key="ultra"]:hover .model-orb-core,
.model-orb-wrap.ultra.open .model-orb-core {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 8px 22px rgba(245, 158, 11, .55),
    0 0 24px rgba(239, 68, 68, .3);
}
.model-orb:hover .model-orb-ring,
.model-orb-wrap.open .model-orb-ring {
  animation-duration: 1.1s;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.7));
}
.model-orb-wrap.open .model-orb {
  transform: scale(1.04);
}
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbGlow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes orbHalo {
  0%, 100% { opacity: .4; transform: scale(.96); }
  50% { opacity: .85; transform: scale(1.06); }
}
.model-orb-wrap.open {
  z-index: 10000;
}
.model-orb-menu {
  /* Default: absolute above orb (when under #modelOrbWrap, closed/hidden). */
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(272px, 82vw);
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(240,249,255,.78) 55%, rgba(237,233,254,.72));
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(14, 165, 233, .28),
    0 0 0 2px rgba(167, 139, 250, .12),
    0 18px 48px rgba(8, 47, 73, .22),
    inset 0 1px 0 rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  z-index: 9999;
  transform-origin: 86% 100%;
  animation: orbMenuIn .42s cubic-bezier(.22,1.2,.36,1) both;
  overflow: hidden;
  box-sizing: border-box;
}
/* Portaled to body on open: fixed + getBoundingClientRect.
   Escapes .main/.messages/.welcome-empty overflow clip (welcome canvas), NOT by touching composer overflow.
   z-index must beat .main/.top(~25-41), .feature-panel(80), .drama-dur-menu(200), .sel-speak-bar(9999). */
.model-orb-menu.is-portaled {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 100000 !important;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  /* width/left/top set by JS from innerWidth - avoid 100vw page grow */
  max-width: none;
  pointer-events: auto;
}
.model-orb-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(56,189,248,.7), rgba(167,139,250,.55), rgba(244,114,182,.45), rgba(56,189,248,.55));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: .85;
  animation: orbBorderShift 4.5s linear infinite;
}
.model-orb-menu[hidden] { display: none !important; }
@keyframes orbMenuIn {
  from { opacity: 0; transform: translateY(12px) scale(.88) rotate(-2deg); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes orbBorderShift {
  to { filter: hue-rotate(360deg); }
}
@keyframes orbItemIn {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes orbItemOnPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(14,165,233,.28), 0 0 0 rgba(14,165,233,0); }
  50% { box-shadow: 0 0 0 1px rgba(14,165,233,.45), 0 0 18px rgba(56,189,248,.28); }
}
.model-orb-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 14px;
  padding: 10px 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s cubic-bezier(.22,1.2,.36,1),
    box-shadow .2s ease;
  animation: orbItemIn .4s cubic-bezier(.22,1.15,.36,1) both;
}
.model-orb-wrap.open .model-orb-item:nth-child(1),
.model-orb-menu.is-portaled .model-orb-item:nth-child(1) { animation-delay: .04s; }
.model-orb-wrap.open .model-orb-item:nth-child(2),
.model-orb-menu.is-portaled .model-orb-item:nth-child(2) { animation-delay: .09s; }
.model-orb-wrap.open .model-orb-item:nth-child(3),
.model-orb-menu.is-portaled .model-orb-item:nth-child(3) { animation-delay: .14s; }
.model-orb-wrap.open .model-orb-item:nth-child(4),
.model-orb-menu.is-portaled .model-orb-item:nth-child(4) { animation-delay: .19s; }
.model-orb-wrap.open .model-orb-item:nth-child(5),
.model-orb-menu.is-portaled .model-orb-item:nth-child(5) { animation-delay: .24s; }
.model-orb-wrap.open .model-orb-item:nth-child(6),
.model-orb-menu.is-portaled .model-orb-item:nth-child(6) { animation-delay: .29s; }
.model-orb-wrap.open .model-orb-item:nth-child(n+7),
.model-orb-menu.is-portaled .model-orb-item:nth-child(n+7) { animation-delay: .34s; }
.model-orb-item:hover {
  background: rgba(14, 165, 233, .1);
  border-color: rgba(14, 165, 233, .18);
  transform: translateX(2px);
}
.model-orb-item:active {
  transform: scale(.98);
}
.model-orb-item.on {
  background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(124,58,237,.12));
  border-color: rgba(14, 165, 233, .36);
  animation: orbItemIn .4s cubic-bezier(.22,1.15,.36,1) both, orbItemOnPulse 2.6s ease-in-out infinite;
}
.model-orb-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .72rem; font-weight: 900;
  background: linear-gradient(145deg, #0ea5e9, #7c3aed);
  box-shadow: 0 4px 10px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.model-orb-item:hover .model-orb-dot {
  transform: scale(1.08) rotate(-6deg);
}
.model-orb-item.on .model-orb-dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 4px 14px rgba(37,99,235,.5);
}
.model-orb-item[data-key="pro"] .model-orb-dot {
  background: linear-gradient(145deg, #14b8a6, #0ea5e9);
}
.model-orb-item[data-key="ultra"] .model-orb-dot {
  background: linear-gradient(145deg, #f59e0b, #7c3aed);
}
.model-orb-item b {
  display: block;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.2;
}
.model-orb-item small {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
  font-weight: 800;
  opacity: .7;
}
.model-orb-tag {
  margin-left: auto;
  flex-shrink: 0;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e0f2fe, #ede9fe);
  color: #0369a1;
  border: 1px solid rgba(14,165,233,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.model-orb-item[data-key="pro"] .model-orb-tag {
  background: linear-gradient(135deg, #ccfbf1, #e0f2fe);
  color: #0f766e;
  border-color: rgba(13,148,136,.28);
}
.model-orb-item[data-key="ultra"] .model-orb-tag {
  background: linear-gradient(135deg, #fef3c7, #fce7f3);
  color: #b45309;
  border-color: rgba(245,158,11,.28);
}
.icon-round {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  border: 1px solid rgba(14, 165, 233, 0.25);
  background: rgba(255, 255, 255, 0.9); font-size: 1.15rem; font-weight: 800;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; color: var(--ink);
}
.icon-round.on {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #fff; border-color: transparent;
}
.icon-round.rec { border-color: var(--danger); color: var(--danger); animation: pulse 1s infinite; }
/* attach plus contrast */
/* attach plus contrast */
#attachBtn.icon-round {
  background: #111111;
  color: #ffffff;
  border: 1px solid #000000;
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: none;
}
#attachBtn.icon-round:hover,
#attachBtn.icon-round:focus-visible {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
#attachBtn.icon-round:active {
  background: #222222;
}

@keyframes pulse { 50% { opacity: 0.55; } }
.attach-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #111111;
  color: #ffffff;
  border: 1px solid #3b82f6;
  font-size: 0.78rem; font-weight: 700;
}
.attach-chip.file-chip {
  align-items: flex-start;
  border-radius: 12px;
  max-width: min(280px, 86vw);
  padding: 8px 10px;
}
.attach-chip-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.attach-file-ov {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0.82;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 220px;
}
.attach-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }
.attach-chip button { border: 0; background: 0; cursor: pointer; color: #93c5fd; font-weight: 800; }
.hint { margin: 8px 0 0; font-size: 0.8rem; font-weight: 700; color: var(--soft); min-height: 1.1em; }
.hint.err { color: var(--danger); }
.popo-about-btn { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }

.side-mask {
  display: none; position: fixed; inset: 0; z-index: 15;
  background: rgba(12, 74, 110, 0.35); backdrop-filter: blur(2px);
}

dialog {
  border: 0; border-radius: 18px; background: var(--card); color: var(--ink);
  padding: 0; max-width: 420px; width: calc(100% - 2rem);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(12, 74, 110, 0.45); }
.pay-box { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.65rem; }
.pay-box h2 { margin: 0; font-family: var(--display); }
.pay-qr { width: 100%; max-width: 280px; margin: 0 auto; border-radius: 12px; }
.row.end { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Mobile: drawer sidebar like family-assistant */
@media (max-width: 860px) {
  html, body {
    height: 100%;
    height: var(--app-h, 100dvh);
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: manipulation;
  }
  html.is-ios, html.is-ios body {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
  }
  html.is-ios .layout {
    top: var(--vv-top, 0px) !important;
    right: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: var(--app-h, 100dvh) !important;
    padding-top: 0;
  }
  html.is-ios .input-slot textarea,
  html.is-ios #input {
    font-size: 16px;
  }
  html.is-ios.kb-open .composer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--kb-h, 0px);
    z-index: 80;
    padding-bottom: 8px;
    max-width: 100%;
  }
  html.is-ios.kb-open .messages {
    padding-bottom: calc(var(--composer-h, 96px) + 8px);
  }
  body {
    min-height: var(--app-h, 100dvh);
  }
  .layout {
    grid-template-columns: 1fr;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: var(--app-h, 100dvh);
    margin: 0;
    padding-top: env(safe-area-inset-top, 0px);
    overflow: hidden;
  }
  .side-mask[hidden] { display: none !important; }
  .side-mask:not([hidden]) { display: block; }
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(320px, 88vw);
    z-index: 20;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow);
    height: var(--app-h, 100dvh);
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }
  .sidebar.open { transform: none; }
  .main {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }
  .messages {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: 8px;
  }
  .composer {
    flex-shrink: 0;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }
  .composer-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .composer-tools::-webkit-scrollbar { display: none; }
  .quick-bubbles-wrap {
    max-width: 100%;
    overflow: hidden;
  }
  .icon-btn { display: inline-flex; }
  .top {
    padding-top: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .top-title small { display: none; }
  .model { max-width: min(120px, 34vw); font-size: 0.85rem; padding: 7px 8px; }
  #modeSelect { max-width: min(88px, 24vw); }
  .send-btn { padding: 10px 12px; font-size: 0.9rem; }
  .bubble { max-width: 92%; font-size: 0.95rem; }
  .auth-gate {
    height: var(--app-h, 100dvh);
    max-height: var(--app-h, 100dvh);
    min-height: 0;
    padding:
      calc(1.25rem + env(safe-area-inset-top, 0px))
      1.25rem
      calc(1.25rem + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    align-content: start;
    place-items: start center;
    pointer-events: auto;
  }
  html.is-ios .auth-gate {
    position: absolute;
    inset: 0;
    height: auto;
    max-height: none;
  }
  .auth-card { border-radius: 18px; }
  .welcome-empty {
    min-height: min(48vh, 360px);
    padding: 18px 12px 24px;
  }
  .welcome-chip { font-size: 0.82rem; padding: 9px 12px; }
  .feature-head {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
}

/* Added-to-home-screen: true edge-to-edge */
html.is-standalone .layout {
  padding-top: env(safe-area-inset-top, 0px);
}
html.is-standalone body {
  background: #0284c7;
}

.download-link {
  display: block; text-align: center; margin-top: 6px;
  color: var(--soft); font-weight: 800; font-size: 0.9rem;
  text-decoration: none;
}
.download-link:hover { text-decoration: underline; color: #0284c7; }

.side-extra { margin-top: 6px; font-weight: 800; }

/* New-chat welcome + one-click chips */
.welcome-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(62vh, 520px);
  padding: 28px 18px 40px;
  text-align: center;
}
.welcome-empty h2 {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3.2vw, 1.9rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.welcome-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 820px;
}
.welcome-chip {
  border: 1px solid rgba(14, 165, 233, 0.28);
  background: rgba(255, 255, 255, 0.78);
  color: #0c4a6e;
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 750;
  font-size: 0.88rem;
  line-height: 1.35;
  max-width: 100%;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.06);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.welcome-chip:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(2, 132, 199, 0.45);
}

/* Cloud / AI browser overlays */
.feature-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 30, 50, 0.38);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 18px;
}
.feature-panel[hidden] { display: none !important; }
.feature-sheet {
  width: min(920px, 100%);
  max-height: calc(100dvh - 36px);
  margin: auto;
  background: #f8fbff;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 24px 60px rgba(2, 80, 140, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.browser-sheet { width: min(1100px, 100%); height: min(860px, calc(100dvh - 36px)); }
.browser-tabs {
  display: none;
  gap: 6px;
  padding: 0 12px 8px;
  flex-shrink: 0;
}
.browser-tab {
  flex: 1;
  border: 1px solid rgba(14, 165, 233, 0.22);
  background: rgba(255, 255, 255, 0.55);
  color: var(--soft);
  border-radius: 999px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
}
.browser-tab.on {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  color: #fff;
  border-color: transparent;
}
.feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(14,165,233,.15);
  background: rgba(255,255,255,.9);
}
.feature-head strong {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.feature-quota, .feature-toolbar, #cloudHint, #browserHint {
  padding: 8px 16px 0;
}
.feature-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
.feature-list {
  flex: 1;
  overflow: auto;
  padding: 8px 16px 16px;
  display: grid;
  gap: 8px;
}
.cloud-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(14,165,233,.14);
  font-weight: 700;
  cursor: pointer;
}
.cloud-item .meta { margin-left: auto; color: var(--soft); font-size: 0.8rem; font-weight: 700; }
.cloud-item .cloud-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-item .dl {
  border: 0; background: transparent; color: #0369a1; font-weight: 800; cursor: pointer; flex-shrink: 0;
}
.cloud-item .del {
  border: 0; background: transparent; color: #b91c1c; font-weight: 800; cursor: pointer;
}
.cloud-saved-hint {
  margin: 0.35rem 0.75rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f766e;
}
.browser-bar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
}
.browser-bar input {
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(14,165,233,.25);
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
}
.browser-body {
  flex: 1 1 auto;
  min-height: 280px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.9fr);
  gap: 12px;
  padding: 0 14px 14px;
  border-top: 1px solid rgba(14,165,233,.12);
}
.browser-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.browser-view {
  position: relative;
  min-height: 280px;
  height: 100%;
  background: #0b1220;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  outline: none;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 16px;
  border: 1px solid rgba(14, 165, 233, 0.18);
}
.browser-empty {
  margin: auto;
  padding: 24px 18px;
  max-width: 22em;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #e2e8f0;
}
.browser-view:focus {
  box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.55);
}
.browser-view img {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  object-fit: contain;
  object-position: center center;
  display: block;
  cursor: crosshair;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  touch-action: none;
}
.browser-reader {
  padding: 14px 16px;
  white-space: pre-wrap;
  font-size: 0.92rem;
  line-height: 1.5;
  overflow: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.browser-click-hint {
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0369a1;
  background: rgba(224, 242, 254, 0.95);
  border-top: 1px solid rgba(14,165,233,.15);
  flex-shrink: 0;
  pointer-events: none;
}
.browser-ai-title small {
  margin-left: 8px;
  font-weight: 700;
  color: var(--soft);
  font-size: 0.78rem;
}
.browser-ai {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(14,165,233,.12);
  background: rgba(240, 249, 255, 0.85);
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
}
.browser-ai-title {
  padding: 10px 12px;
  font-weight: 800;
  border-bottom: 1px solid rgba(14,165,233,.12);
}
.browser-ai-log {
  flex: 1;
  overflow: auto;
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.browser-ai-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(14,165,233,.12);
}
.browser-ai-row input {
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(14,165,233,.25);
  padding: 8px 10px;
  font: inherit;
}
@media (max-width: 720px) {
  .feature-panel {
    padding: 0;
    align-items: stretch;
  }
  .feature-sheet,
  .browser-sheet {
    width: 100%;
    height: var(--app-h, 100dvh);
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .browser-tabs { display: flex; }
  .browser-body {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
    padding: 0 10px 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .browser-view {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 42vh;
    height: auto;
    border-radius: 16px;
  }
  .browser-ai {
    flex: 0 1 auto;
    max-height: 34vh;
    border-radius: 16px;
    padding-bottom: 0;
  }
  .browser-body[data-pane="view"] .browser-ai {
    display: none;
  }
  .browser-body[data-pane="ai"] .browser-view {
    flex: 0 0 32vh;
    min-height: 32vh;
  }
  .browser-body[data-pane="ai"] .browser-ai {
    display: flex;
    flex: 1 1 auto;
    max-height: none;
    min-height: 180px;
  }
  .browser-bar {
    flex-wrap: nowrap;
    padding: 8px 10px;
    gap: 6px;
  }
  .browser-bar input {
    min-width: 0;
    flex: 1 1 auto;
    padding: 8px 10px;
  }
  .browser-bar .ghost {
    min-width: 40px;
    padding: 8px 10px;
  }
  #browserHint { display: none; }
}

@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  .feature-panel {
    padding: 12px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .browser-sheet {
    width: 100%;
    height: calc(var(--app-h, 100dvh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: none;
    border-radius: 22px;
  }
  .browser-body {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 12px;
    padding: 0 14px 14px;
    min-height: 0;
    flex: 1 1 auto;
  }
  .browser-view {
    display: flex !important;
    flex: 1.4 1 auto;
    min-height: 280px;
    height: auto;
  }
  .browser-ai {
    flex: 0.8 1 auto;
    min-height: 180px;
    max-height: 38vh;
  }
  #browserHint { display: none; }
}

@media (max-height: 540px) {
  .browser-tabs { display: flex; }
  .browser-body {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 8px;
    min-height: 0;
    flex: 1 1 auto;
  }
  .browser-view {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 36vh;
  }
  .browser-body[data-pane="view"] .browser-ai { display: none; }
  .browser-body[data-pane="ai"] .browser-view {
    flex: 0 0 28vh;
    min-height: 28vh;
  }
  #browserHint { display: none; }
}


/* classic: keep pre-island sidebar structure usable (HTML shared) */
.side-island {
  display: contents; /* unwrap — classic sees original flow */
}
.side-actions-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.side-chip { width: 100%; }
.side-foot-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.side-foot-half { width: 100%; }
.side-upgrade { width: 100%; }
.side-new { width: 100%; }

/* GROK_MENU_INLINE_V48 — hamburger sits beside chat title */
.top-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.top-title strong { display: inline-block; }
#menuBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 4px 8px;
  font-size: 15px;
  line-height: 1;
  margin: 0;
  flex-shrink: 0;
}


/* GROK_SIDEBAR_OPEN_V50 fab removed in V51 */

/* GROK_DUAL_MENU_V51 — left ☰ = sidebar (narrow); right ☰ = shell (Win) */
.side-menu-btn { display: none !important; }
.shell-menu-btn, #menuBtn.shell-menu-btn { display: none !important; }
.side-open-fab { display: none !important; }

/* narrow / phone: left ☰ only (unless Win shell also shows right) */
@media (max-width: 860px) {
  .side-menu-btn { display: inline-flex !important; }
  html:not(.is-popo-shell) .shell-menu-btn,
  html:not(.is-popo-shell) #menuBtn.shell-menu-btn { display: none !important; }
  html.is-popo-shell .shell-menu-btn,
  html.is-popo-shell #menuBtn.shell-menu-btn { display: inline-flex !important; }
}

/* wide: no left ☰ (island always visible); Win shell keeps right ☰ */
@media (min-width: 861px) {
  .side-menu-btn { display: none !important; }
  html.is-popo-shell .shell-menu-btn,
  html.is-popo-shell #menuBtn.shell-menu-btn { display: inline-flex !important; }
  html:not(.is-popo-shell) .shell-menu-btn,
  html:not(.is-popo-shell) #menuBtn.shell-menu-btn { display: none !important; }
}

/* Right assist drawer: office / browser / cloud */
.assist-swipe {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 16px;
  z-index: 64;
  background: transparent;
  touch-action: pan-y;
}
#app.hidden ~ .assist-swipe { display: none !important; }
.assist-drawer[hidden] { display: none !important; }
.assist-drawer {
  position: fixed;
  inset: 0;
  z-index: 72;
  pointer-events: none;
}
.assist-drawer.is-open { pointer-events: auto; }
.assist-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 20, 40, 0.28);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.assist-drawer.is-open .assist-scrim { opacity: 1; }
.assist-island {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: min(78vw, 1040px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  pointer-events: auto;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 48px rgba(2, 80, 140, 0.22);
  transform: translate3d(110%, 0, 0);
  transition: transform 0.34s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}
.assist-drawer.is-open .assist-island { transform: translate3d(0, 0, 0); }
.assist-drawer.is-full .assist-island {
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  border-radius: 0;
}
.assist-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(14, 165, 233, 0.14);
}
.assist-tabs {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.assist-tab {
  flex: 1;
  border: 1px solid rgba(14, 165, 233, 0.2);
  background: rgba(255, 255, 255, 0.55);
  color: var(--soft);
  border-radius: 999px;
  padding: 8px 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}
.assist-tab.on {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  color: #fff;
  border-color: transparent;
}
.assist-tab:active { transform: scale(0.97); }
.assist-tools { display: flex; gap: 6px; flex-shrink: 0; }
.assist-ico {
  width: 36px; height: 36px; padding: 0;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.assist-body {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.assist-pane {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
}
.assist-pane.on { display: flex; }
.assist-pane .feature-head { display: none; }
.assist-pane .feature-sheet,
.assist-pane .browser-sheet {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.assist-pane[data-assist-pane="office"] {
  padding: 8px 10px 10px;
  gap: 8px;
}
.assist-pane[data-assist-pane="office"]:has(#assistOfficeFrame:not([hidden])) {
  padding: 4px 6px 6px;
  gap: 6px;
}
.assist-pane[data-assist-pane="office"]:has(#assistOfficeFrame:not([hidden])) .assist-office-files {
  max-height: 40px;
  min-height: 0;
  padding: 4px 8px;
}
.assist-office-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  margin: 0;
  padding: 10px 12px;
  max-height: 104px;
  overflow: auto;
  flex-shrink: 0;
  min-height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(14, 165, 233, 0.28);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.12);
}
.assist-office-hint {
  width: 100%;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--soft);
}
.assist-office-file {
  border: 1px solid rgba(14,165,233,.22);
  background: #fff;
  color: #0369a1;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assist-office-file.on {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #38bdf8;
}
.assist-office-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(14, 165, 233, 0.28);
  background: #fff;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.14);
}
#assistOfficeFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  z-index: 1;
  border-radius: 18px;
}
#assistOfficeFrame[hidden] { display: none; }
.assist-office-empty {
  margin: auto;
  padding: 24px 20px;
  text-align: center;
  font-weight: 800;
  color: var(--soft);
  line-height: 1.55;
  max-width: 280px;
}
.assist-pane .browser-body { min-height: 0; }
.assist-pane .feature-list { min-height: 0; }
.assist-drawer.is-open ~ .assist-swipe,
body:has(.assist-drawer.is-open) .assist-swipe { display: none; }
@media (max-width: 720px) {
  .assist-island {
    top: 0; right: 0; bottom: 0;
    width: min(100vw, 100%);
    border-radius: 20px 0 0 20px;
  }
  .assist-drawer.is-full .assist-island { border-radius: 0; }
  .assist-pane .browser-tabs { display: flex; }
}


/* AI短剧 duration mini menu */
.drama-dur-menu {
  position: fixed;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(18, 24, 38, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(10px);
  max-width: min(92vw, 320px);
}
.drama-dur-opt {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  color: #f5f7ff;
  background: rgba(99, 132, 255, 0.28);
}
.drama-dur-opt:active,
.drama-dur-opt:hover {
  background: rgba(99, 132, 255, 0.48);
}
@media (max-width: 640px) {
  .drama-dur-menu { gap: 8px; padding: 10px; }
  .drama-dur-opt { padding: 10px 14px; font-size: 14px; }
}

/* ===== 正文内嵌只读表格 (chat-table, 20261017t) =====
 * 字号 = 正文 × 0.75（正文 16px → 12px；手机 15.2px → 11.4px），最低 11px。
 * 想调大小只改 --chat-table-scale 即可。 */
.bubble .answer { --chat-table-scale: 0.75; }
.bubble .answer .chat-table-wrap {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 6px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid rgba(14, 116, 144, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  white-space: normal;
}
.bubble .answer .chat-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
  margin: 0;
  font-size: max(11px, calc(1em * var(--chat-table-scale)));
  line-height: 1.4;
  font-weight: 500;
  color: inherit;
}
.bubble .answer .chat-table th,
.bubble .answer .chat-table td {
  padding: 4px 8px;
  min-width: 3.5em;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  border-right: 1px solid rgba(14, 116, 144, 0.14);
  border-bottom: 1px solid rgba(14, 116, 144, 0.14);
}
.bubble .answer .chat-table th {
  font-weight: 800;
  white-space: nowrap;
  background: rgba(14, 165, 233, 0.12);
}
.bubble .answer .chat-table .ct-long {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 9em;
  max-width: 22em;
}
.bubble .answer .chat-table tr > :last-child { border-right: 0; }
.bubble .answer .chat-table tbody tr:last-child > * { border-bottom: 0; }
.bubble .answer .chat-table tbody tr:nth-child(even) > td { background: rgba(14, 165, 233, 0.05); }
.bubble .answer .chat-table code { font-size: 0.95em; padding: 0 3px; }
.bubble .answer .chat-table strong { font-weight: 800; }
.bubble .answer .ct-sep { display: none !important; }
.bubble .answer .chat-table-pending {
  font-size: max(11px, calc(1em * var(--chat-table-scale)));
  opacity: 0.6;
  padding: 4px 8px;
}
/* neo (dark purple) */
html[data-theme="neo"] .bubble .answer .chat-table-wrap {
  border-color: rgba(196, 181, 253, 0.3);
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="neo"] .bubble .answer .chat-table th,
html[data-theme="neo"] .bubble .answer .chat-table td { border-color: rgba(196, 181, 253, 0.18); }
html[data-theme="neo"] .bubble .answer .chat-table th { background: rgba(139, 92, 246, 0.3); color: #f5f3ff; }
html[data-theme="neo"] .bubble .answer .chat-table tbody tr:nth-child(even) > td { background: rgba(255, 255, 255, 0.05); }
/* plain (light) */
html[data-theme="plain"] .bubble .answer .chat-table-wrap { border-color: rgba(31, 35, 41, 0.12); background: #fff; }
html[data-theme="plain"] .bubble .answer .chat-table th,
html[data-theme="plain"] .bubble .answer .chat-table td { border-color: rgba(31, 35, 41, 0.08); }
html[data-theme="plain"] .bubble .answer .chat-table th { background: #f2f4f7; color: #1f2329; }
html[data-theme="plain"] .bubble .answer .chat-table tbody tr:nth-child(even) > td { background: #fafbfc; }
/* mobile (light, compact) */
html[data-theme="mobile"] .bubble .answer .chat-table-wrap { border-color: var(--line, rgba(17, 24, 39, 0.1)); background: #fff; }
html[data-theme="mobile"] .bubble .answer .chat-table th,
html[data-theme="mobile"] .bubble .answer .chat-table td { border-color: rgba(17, 24, 39, 0.07); padding: 3px 7px; }
html[data-theme="mobile"] .bubble .answer .chat-table th { background: #eff6ff; color: #1e3a8a; }
html[data-theme="mobile"] .bubble .answer .chat-table tbody tr:nth-child(even) > td { background: #f9fafb; }
@media (max-width: 720px) {
  .bubble .answer .chat-table th,
  .bubble .answer .chat-table td { padding: 3px 6px; min-width: 3em; }
}

/* ===== 正文内嵌代码编辑卡 ===== */
.bubble .answer .chat-code-card {
  margin: 8px 0;
  border: 1px solid rgba(14, 116, 144, 0.22);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.bubble .answer .chat-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(14, 165, 233, 0.1);
}
.bubble .answer .chat-code-lang { font-weight: 700; letter-spacing: 0.04em; }
.bubble .answer .chat-code-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-code-btn {
  border: 0;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  color: inherit;
}
.chat-code-btn.primary { background: #0ea5e9; color: #fff; }
.bubble .answer .chat-code-edit,
#popo-code-stage .chat-code-edit {
  display: block;
  width: 100%;
  min-height: 180px;
  max-height: 420px;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  resize: vertical;
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
  background: #0b1220;
  color: #e5e7eb;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: auto;
}
.bubble .answer .chat-code-run { border-top: 1px solid rgba(14, 116, 144, 0.16); }
.bubble .answer .chat-code-frame {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
  background: #fff;
}
.bubble .answer .chat-code-out,
#popo-code-stage .pcs-out {
  margin: 0;
  padding: 10px 12px;
  max-height: 220px;
  overflow: auto;
  font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}
html[data-theme="neo"] .bubble .answer .chat-code-card {
  border-color: rgba(196, 181, 253, 0.3);
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="neo"] .bubble .answer .chat-code-bar { background: rgba(139, 92, 246, 0.22); }
html[data-theme="neo"] .chat-code-btn { background: rgba(255, 255, 255, 0.1); color: #f5f3ff; }
html[data-theme="neo"] .chat-code-btn.primary { background: #8b5cf6; color: #fff; }

#popo-code-stage {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(2, 6, 23, 0.72);
  padding: 16px;
}
#popo-code-stage .pcs-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #111827;
  border-radius: 14px;
  overflow: hidden;
  color: #e5e7eb;
}
#popo-code-stage .pcs-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #1f2937;
}
#popo-code-stage .pcs-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}
#popo-code-stage .pcs-edit { min-height: 0; max-height: none; height: 100%; resize: none; }
#popo-code-stage .pcs-frame { width: 100%; height: 100%; border: 0; background: #fff; }
html.pcs-open { overflow: hidden; }
@media (max-width: 720px) {
  #popo-code-stage .pcs-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .bubble .answer .chat-code-edit { min-height: 140px; max-height: 280px; }
}


/* ---- bubble 朗读/复制 + 选区工具条 ---- */
.bubble-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(14, 116, 144, 0.22);
}
.bubble.user .bubble-actions {
  border-top-color: rgba(255, 255, 255, 0.35);
}
.bubble-act {
  appearance: none;
  border: 1px solid rgba(14, 116, 144, 0.28);
  background: rgba(255, 255, 255, 0.72);
  color: #0c4a6e;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
}
.bubble.user .bubble-act {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.bubble-act:hover { filter: brightness(1.05); }
.bubble-act:active { transform: scale(0.97); }
.sel-speak-bar {
  position: absolute;
  z-index: 9999;
  display: flex;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}
.sel-speak-bar .bubble-act {
  background: #fff;
  color: #0f172a;
  border-color: transparent;
}
.sel-speak-bar[hidden] { display: none !important; }


/* ---- TTSLOAD: welcome deferred chips + richer act/sel animations ---- */
@keyframes welcomeEmptyIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.welcome-empty-enter {
  animation: welcomeEmptyIn 0.45s cubic-bezier(.22,.8,.24,1) both;
}
.welcome-greet-refresh {
  animation: welcomeGreetPulse 0.55s ease;
}
@keyframes welcomeGreetPulse {
  0% { filter: blur(0); }
  40% { filter: blur(0.2px); transform: scale(1.015); }
  100% { filter: blur(0); transform: scale(1); }
}
.welcome-chips[data-state="loading"] {
  gap: 12px;
}
.welcome-chip-skel {
  display: inline-block;
  width: 118px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14,165,233,.08), rgba(14,165,233,.18), rgba(14,165,233,.08));
  background-size: 200% 100%;
  animation: welcomeSkel 1.1s ease-in-out infinite;
  border: 1px solid rgba(14,165,233,.12);
}
.welcome-chip-skel:nth-child(2) { width: 150px; animation-delay: .08s; }
.welcome-chip-skel:nth-child(3) { width: 132px; animation-delay: .16s; }
.welcome-chip-skel:nth-child(4) { width: 160px; animation-delay: .24s; }
.welcome-chip-skel:nth-child(5) { width: 124px; animation-delay: .32s; }
.welcome-chip-skel:nth-child(6) { width: 140px; animation-delay: .4s; }
@keyframes welcomeSkel {
  0% { background-position: 100% 0; opacity: .65; }
  50% { opacity: 1; }
  100% { background-position: -100% 0; opacity: .65; }
}
@keyframes welcomeChipIn {
  from { opacity: 0; transform: translateY(16px) scale(0.88); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.welcome-chip.welcome-chip-enter {
  position: relative;
  overflow: hidden;
  animation: welcomeChipIn 0.5s cubic-bezier(.2,.85,.2,1) both;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.1);
}
.welcome-chip .wc-spark {
  position: absolute;
  inset: -40% auto auto -20%;
  width: 40%;
  height: 180%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(18deg) translateX(-120%);
  pointer-events: none;
}
.welcome-chip.welcome-chip-enter:hover .wc-spark,
.welcome-chip.welcome-chip-enter:focus-visible .wc-spark {
  animation: welcomeShine 0.7s ease;
}
@keyframes welcomeShine {
  to { transform: rotate(18deg) translateX(280%); }
}
.welcome-chip[data-bubble-type="continue"] { border-color: rgba(14,165,233,.4); }
.welcome-chip[data-bubble-type="news"] { border-color: rgba(16,185,129,.4); color: #065f46; }
.welcome-chip[data-bubble-type="like"] { border-color: rgba(244,114,182,.45); color: #9d174d; }
.welcome-chip[data-bubble-type="consult"] { border-color: rgba(168,85,247,.4); color: #6b21a8; }
.welcome-chip[data-bubble-type="guess"] { border-color: rgba(251,146,60,.45); color: #9a3412; }
.welcome-chip-pop {
  animation: welcomeChipPop 0.35s ease !important;
}
@keyframes welcomeChipPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(0.96); opacity: .85; }
}

@keyframes bubbleActsIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.bubble-actions-enter {
  animation: bubbleActsIn 0.35s ease both;
}
.bubble-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
  box-shadow: 0 2px 8px rgba(2,132,199,.08);
}
.bubble-act .ba-ico { font-size: 0.85em; line-height: 1; }
.bubble-act:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(2,132,199,.16);
}
.bubble-act.is-speaking {
  animation: speakPulse 1s ease-in-out infinite;
  border-color: rgba(14,165,233,.65);
  background: linear-gradient(120deg, #e0f2fe, #f0f9ff, #e0f2fe);
  background-size: 200% 100%;
}
.bubble.user .bubble-act.is-speaking {
  background: rgba(255,255,255,.35);
}
@keyframes speakPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14,165,233,.35); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(14,165,233,0); }
}
.bubble-act.is-copied {
  border-color: rgba(16,185,129,.55);
  color: #047857;
}

.sel-speak-bar {
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(15,23,42,.94), rgba(30,41,59,.92));
  box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 0 0 1px rgba(56,189,248,.12);
}
.sel-speak-bar.sel-speak-pop {
  animation: selBarPop 0.28s cubic-bezier(.2,.9,.2,1);
}
@keyframes selBarPop {
  from { opacity: 0; transform: translateY(8px) scale(0.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sel-speak-bar .bubble-act {
  background: #fff;
  color: #0f172a;
  border-color: transparent;
  font-weight: 800;
}
.sel-speak-bar .bubble-act-speak:hover {
  background: #e0f2fe;
}
.sel-speak-bar .bubble-act-copy:hover {
  background: #d1fae5;
}

/* ---- BOOTPAR_UX: light micro-interactions (no extra JS) ---- */
/* Extra liveliness on top of TTSLOAD; keep short, GPU-friendly transforms only. */
.welcome-empty-enter .welcome-kicker {
  animation: bootparKickerIn 0.55s cubic-bezier(.22,.8,.24,1) both;
}
.welcome-empty-enter .welcome-greet {
  animation: bootparGreetIn 0.6s cubic-bezier(.22,.8,.24,1) 0.06s both;
}
@keyframes bootparKickerIn {
  from { opacity: 0; letter-spacing: 0.28em; transform: translateY(6px); }
  to { opacity: 1; letter-spacing: inherit; transform: translateY(0); }
}
@keyframes bootparGreetIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.welcome-chip.welcome-chip-enter:nth-child(1) { animation-delay: 0.02s; }
.welcome-chip.welcome-chip-enter:nth-child(2) { animation-delay: 0.07s; }
.welcome-chip.welcome-chip-enter:nth-child(3) { animation-delay: 0.12s; }
.welcome-chip.welcome-chip-enter:nth-child(4) { animation-delay: 0.17s; }
.welcome-chip.welcome-chip-enter:nth-child(5) { animation-delay: 0.22s; }
.welcome-chip.welcome-chip-enter:nth-child(6) { animation-delay: 0.27s; }
.welcome-chip.welcome-chip-enter:nth-child(7) { animation-delay: 0.32s; }
.welcome-chip.welcome-chip-enter:nth-child(8) { animation-delay: 0.37s; }
.welcome-chip {
  transition: transform .2s cubic-bezier(.2,.9,.2,1), box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.welcome-chip:active {
  transform: translateY(0) scale(0.97);
}
.bubble-actions-enter .bubble-act:nth-child(1) { animation: bootparActIn .34s cubic-bezier(.2,.9,.2,1) both; }
.bubble-actions-enter .bubble-act:nth-child(2) { animation: bootparActIn .34s cubic-bezier(.2,.9,.2,1) .05s both; }
@keyframes bootparActIn {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bubble-act:active {
  transform: translateY(0) scale(0.96);
}
.bubble-act.is-speaking .ba-ico {
  display: inline-block;
  animation: bootparSpeakIco 0.9s ease-in-out infinite;
}
@keyframes bootparSpeakIco {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.bubble-act.is-copied {
  animation: bootparCopiedPop 0.45s cubic-bezier(.2,.9,.2,1);
}
@keyframes bootparCopiedPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.sel-speak-bar.sel-speak-pop {
  animation: bootparSelPop 0.32s cubic-bezier(.2,.9,.22,1);
}
@keyframes bootparSelPop {
  from { opacity: 0; transform: translateY(10px) scale(0.9); filter: blur(1px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.sel-speak-bar .bubble-act:active {
  transform: scale(0.96);
}
@media (prefers-reduced-motion: reduce) {
  .model-orb-wrap::before,
  .model-orb-ring,
  .model-orb-spark,
  .model-orb-menu,
  .model-orb-menu::before,
  .model-orb-item,
  .model-orb-item.on {
    animation: none !important;
    transition: none !important;
  }
  .model-orb:hover .model-orb-core,
  .model-orb-wrap.open .model-orb-core,
  .model-orb-item:hover .model-orb-dot {
    transform: none !important;
  }
  .welcome-empty-enter,
  .welcome-empty-enter .welcome-kicker,
  .welcome-empty-enter .welcome-greet,
  .welcome-chip.welcome-chip-enter,
  .bubble-actions-enter,
  .bubble-actions-enter .bubble-act,
  .bubble-act.is-speaking,
  .bubble-act.is-speaking .ba-ico,
  .bubble-act.is-copied,
  .sel-speak-bar.sel-speak-pop,
  .welcome-chip-skel {
    animation: none !important;
    transition: none !important;
  }
}

/* === POPO_MOTION_20261030a === */
html.theme-crossfade,
html.theme-crossfade body,
html.theme-crossfade .bg,
html.theme-crossfade .sidebar,
html.theme-crossfade .main,
html.theme-crossfade .topbar,
html.theme-crossfade .composer,
html.theme-crossfade .bubble,
html.theme-crossfade .side-island,
html.theme-crossfade .neo-island,
html.theme-crossfade .glass,
html.theme-crossfade .panel,
html.theme-crossfade button,
html.theme-crossfade .ghost,
html.theme-crossfade .input-wrap,
html.theme-crossfade .welcome-empty,
html.theme-crossfade .model-orb-wrap {
  transition:
    background-color .48s cubic-bezier(.22,1,.36,1),
    background .48s cubic-bezier(.22,1,.36,1),
    color .48s cubic-bezier(.22,1,.36,1),
    border-color .48s cubic-bezier(.22,1,.36,1),
    box-shadow .48s cubic-bezier(.22,1,.36,1),
    fill .48s cubic-bezier(.22,1,.36,1),
    stroke .48s cubic-bezier(.22,1,.36,1) !important;
}

html.reduce-motion,
html.reduce-motion * ,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.reduce-motion .theme-crossfade,
html.reduce-motion.theme-crossfade,
html.reduce-motion.theme-crossfade * {
  transition: none !important;
}


/* ---- HOLD-TO-TALK bubble (20261030m) ---- */
.mic-btn { width: 40px !important; height: 40px !important; border-radius: 999px !important; padding: 0 !important; flex-shrink: 0; }
.mic-btn svg { display: block; }
.mic-btn.on {
  background: linear-gradient(145deg, rgba(56,189,248,.28), rgba(14,165,233,.18)) !important;
  color: #0369a1 !important;
  border-color: rgba(14,165,233,.45) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.18);
}
.input-slot { position: relative; }
.compose-row.voice-mode .input-slot {
  min-height: 48px;
  align-items: center;
  justify-content: center;
}
.hold-talk {
  display: none; align-items: center; justify-content: center; cursor: pointer;
  user-select: none; -webkit-user-select: none; touch-action: none; color: var(--soft);
  margin: 0; font-weight: 800; letter-spacing: 0.12em; transition:
    transform .28s cubic-bezier(.22,.9,.28,1), opacity .22s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-radius .35s ease, min-height .35s ease;
}
.compose-row.voice-mode .hold-talk { display: flex !important; }
.compose-row.voice-mode.bubble-live .hold-talk {
  opacity: 0; pointer-events: none; transform: scale(.86);
}
.voice-bubble {
  position: absolute; left: 50%; bottom: 6px; z-index: 8;
  width: 92px; height: 92px;
  transform: translate(-50%, 18px) scale(.55);
  opacity: 0; pointer-events: none;
  display: grid; place-items: center;
  transition: opacity .22s ease, transform .38s cubic-bezier(.16,.84,.22,1);
}
.compose-row.voice-mode.bubble-live .voice-bubble {
  opacity: 1; pointer-events: none;
  transform: translate(-50%, -28px) scale(1);
}
.voice-bubble-core {
  position: absolute; inset: 18% ;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), transparent 42%),
    linear-gradient(160deg, #7dd3fc 0%, #38bdf8 38%, #0ea5e9 72%, #6366f1 100%);
  box-shadow:
    0 14px 34px rgba(14,165,233,.38),
    0 4px 14px rgba(99,102,241,.22),
    inset 0 -8px 18px rgba(14,116,144,.25);
  animation: popoVoiceBreath 1.35s ease-in-out infinite;
}
.voice-bubble-ring {
  position: absolute; inset: 6%;
  border-radius: 50%;
  border: 2px solid rgba(56,189,248,.35);
  animation: popoVoiceRipple 1.8s ease-out infinite;
}
.voice-bubble-ring.r2 {
  inset: 0; border-color: rgba(99,102,241,.28);
  animation-delay: .45s;
}
.voice-bubble-wave {
  position: absolute; left: 50%; bottom: 72%;
  width: 10px; height: 28px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(125,211,252,.15), rgba(56,189,248,.85));
  box-shadow: 0 0 18px rgba(56,189,248,.45);
  transform-origin: 50% 100%;
  transition: height .08s linear, opacity .15s ease;
  opacity: .85;
}
.voice-bubble-label {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; color: #0284c7;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
  opacity: .92;
}
@keyframes popoVoiceBreath {
  0%, 100% { transform: scale(1) translateY(0); }
  40% { transform: scale(1.07) translateY(-3px); }
  70% { transform: scale(.97) translateY(1px); }
}
@keyframes popoVoiceRipple {
  0% { transform: scale(.88); opacity: .55; }
  100% { transform: scale(1.28); opacity: 0; }
}
.compose-row.voice-mode.bubble-live .voice-bubble.is-loud .voice-bubble-core {
  animation-duration: .85s;
  filter: saturate(1.15) brightness(1.05);
}
html.reduce-motion .voice-bubble-core,
html.reduce-motion .voice-bubble-ring { animation: none !important; }
html.reduce-motion .compose-row.voice-mode.bubble-live .voice-bubble {
  transition: opacity .12s ease;
}