/* ============================================================
   STAR·AGENT — 右侧浮动智能体面板（STARCORE 极限 HUD 风格）
   旋转渐变边框 / 玻璃拟态 / 网格+扫描线 / 霓虹光效 / 像素标题
   全部类名 px- 前缀，零依赖既有结构，fixed 定位不参与文档流。
   ============================================================ */

:root {
  --pxa-cyan: #42e8ff;
  --pxa-pink: #ff3ca6;
  --pxa-purple: #865cff;
  --pxa-lime: #b5ff72;
  --pxa-bg0: rgba(5, 8, 15, .93);
  --pxa-bg1: rgba(9, 14, 24, .96);
  --pxa-line: rgba(66, 232, 255, .22);
  --pxa-font-pixel: "Press Start 2P", "Courier New", monospace;
  --pxa-font-mono: "Courier New", ui-monospace, monospace;
}

/* ================= 启动球 ================= */

.px-agent-orb {
  position: fixed; right: 22px; bottom: 24px; z-index: 940;
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
}
.px-agent-orb:hover { transform: translateY(-3px) scale(1.05); }
.px-agent-orb.open { transform: scale(.4); opacity: 0; pointer-events: none; }

.px-orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--pxa-cyan), var(--pxa-purple) 35%, var(--pxa-pink) 65%, var(--pxa-cyan));
  animation: pxa-rot 3.6s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 10px rgba(66, 232, 255, .55));
}
.px-orb-core {
  position: absolute; inset: 5px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, #17223a, #070b14 68%);
  color: var(--pxa-cyan);
  box-shadow: inset 0 0 14px rgba(66, 232, 255, .25), 0 6px 22px rgba(0, 0, 0, .5);
  animation: pxa-breathe 2.8s ease-in-out infinite;
}
.px-orb-core svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(66, 232, 255, .8)); }
.px-orb-badge {
  position: absolute; top: -4px; right: -4px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pxa-pink); color: #fff;
  font: 800 11px/1 var(--pxa-font-mono);
  box-shadow: 0 0 12px rgba(255, 60, 166, .8), 0 0 0 2px #070b14;
}

/* ================= 面板本体 ================= */

.px-agent-panel {
  position: fixed; right: 18px; top: calc(var(--topbar-h, 62px) + 14px); bottom: 18px; z-index: 930;
  /* 拖拽调宽经 --pxa-w 注入（JS 设置自定义属性，≤640px 的 width:auto 布局不被内联样式压过） */
  width: min(var(--pxa-w, 432px), calc(100vw - 36px));
  display: flex; flex-direction: column;
  border-radius: 22px;
  background: linear-gradient(165deg, var(--pxa-bg1), var(--pxa-bg0) 70%);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 46px rgba(66, 232, 255, .07);
  transform: translateX(calc(100% + 40px)) scale(.97);
  opacity: 0;
  transition: transform .32s cubic-bezier(.22, 1.2, .36, 1), opacity .26s ease;
  overflow: hidden;
}
.px-agent-panel.on { transform: translateX(0) scale(1); opacity: 1; }

/* 左缘拖拽调宽手柄（panel overflow:hidden，手柄贴内缘；宽度记忆见 agent-panel.js） */
.px-resize {
  position: absolute; left: 0; top: 0; bottom: 0; width: 10px; z-index: 8;
  cursor: ew-resize; touch-action: none;
}
.px-resize::before {
  content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 44px; border-radius: 3px;
  background: rgba(66, 232, 255, .28);
  transition: background .15s, box-shadow .15s;
}
.px-resize:hover::before, .px-resize:focus-visible::before { background: rgba(66, 232, 255, .85); box-shadow: 0 0 10px rgba(66, 232, 255, .55); }
.px-agent-panel.resizing { user-select: none; -webkit-user-select: none; }
.px-agent-panel.resizing .px-resize::before { background: var(--pxa-pink); box-shadow: 0 0 12px rgba(255, 60, 166, .6); }

/* 旋转霓虹边框（mask 挖空中心，锥形渐变旋转） */
.px-agent-frame {
  position: absolute; inset: 0; border-radius: 22px;
  padding: 1.5px; pointer-events: none; overflow: hidden; z-index: 5;
  -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;
}
.px-agent-frame::before {
  content: ""; position: absolute; inset: -120%;
  background: conic-gradient(from 0deg,
    transparent 0 210deg, var(--pxa-pink) 265deg, var(--pxa-purple) 315deg, var(--pxa-cyan) 350deg, transparent 360deg);
  animation: pxa-rot 6.5s linear infinite;
}

/* ================= 头部 ================= */

.px-agent-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px 16px; flex: none;
  background: linear-gradient(180deg, rgba(66, 232, 255, .07), transparent 85%);
  border-bottom: 1px solid var(--pxa-line);
  position: relative; z-index: 2;
}
.px-led {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--pxa-lime);
  box-shadow: 0 0 8px rgba(181, 255, 114, .9);
  animation: pxa-blink 2s ease-in-out infinite;
}
.px-head-titles { min-width: 0; }
.px-head-title {
  font: 11px/1 var(--pxa-font-pixel); letter-spacing: .06em; margin: 0 0 4px;
  background: linear-gradient(90deg, var(--pxa-cyan), var(--pxa-purple) 55%, var(--pxa-pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.px-head-sub { font: 10px/1 var(--pxa-font-mono); color: var(--text-3, #5b718b); letter-spacing: .08em; text-transform: uppercase; }
.px-brain-chip {
  margin-left: auto; flex: none;
  font: 9px/1 var(--pxa-font-pixel); letter-spacing: .04em;
  padding: 6px 8px; border-radius: 8px;
  color: var(--pxa-cyan); border: 1px solid rgba(66, 232, 255, .4);
  background: rgba(66, 232, 255, .07);
  text-shadow: 0 0 8px rgba(66, 232, 255, .5);
}
.px-brain-chip.llm { color: var(--pxa-lime); border-color: rgba(181, 255, 114, .4); background: rgba(181, 255, 114, .07); text-shadow: 0 0 8px rgba(181, 255, 114, .5); }
.px-icon-btn {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3, #5b718b); border: 1px solid transparent;
  transition: all .15s;
}
.px-icon-btn:hover { color: var(--pxa-cyan); background: rgba(66, 232, 255, .1); border-color: rgba(66, 232, 255, .3); }
.px-icon-btn svg { width: 15px; height: 15px; }

/* ================= 消息区（网格 + 扫描线） ================= */

.px-agent-body {
  position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 14px 10px;
  background:
    radial-gradient(560px 280px at 85% -8%, rgba(66, 232, 255, .09), transparent 62%),
    radial-gradient(480px 240px at 0% 108%, rgba(255, 60, 166, .09), transparent 62%),
    linear-gradient(rgba(66, 232, 255, .032) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(66, 232, 255, .032) 1px, transparent 1px) 0 0 / 36px 100%;
  scrollbar-width: thin; scrollbar-color: rgba(66, 232, 255, .35) transparent;
}
.px-agent-body::-webkit-scrollbar { width: 7px; }
.px-agent-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(66, 232, 255, .5), rgba(136, 92, 255, .5)); border-radius: 8px; }
.px-agent-body::-webkit-scrollbar-track { background: transparent; }
.px-agent-body::after { /* 扫描线氛围层 */
  content: ""; position: sticky; top: 0; display: block; height: 0;
  box-shadow: 0 0 0 9999px rgba(4, 7, 13, .0);
  pointer-events: none;
}

/* 开机字幕 */
.px-boot { margin: 4px 0 14px; transition: opacity .5s, transform .5s; }
.px-boot.out { opacity: 0; transform: translateY(-8px); }
.px-boot-line {
  font: 11px/2 var(--pxa-font-mono); color: rgba(66, 232, 255, .85);
  text-shadow: 0 0 8px rgba(66, 232, 255, .4);
  animation: pxa-bootin .3s ease both;
}

/* 消息气泡 */
.px-msg { display: flex; flex-direction: column; margin: 0 0 14px; animation: pxa-rise .28s ease both; }
.px-msg.user { align-items: flex-end; }
.px-msg.bot { align-items: flex-start; }

.px-bubble {
  max-width: 88%; padding: 10px 13px;
  font-size: 13.5px; line-height: 1.62; word-break: break-word;
  border-radius: 14px;
}
.px-msg.bot .px-bubble {
  background: rgba(17, 26, 41, .82);
  border: 1px solid rgba(66, 232, 255, .2);
  border-left: 2px solid rgba(66, 232, 255, .65);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .3), inset 0 0 18px rgba(66, 232, 255, .035);
  border-top-left-radius: 5px;
}
.px-msg.user .px-bubble {
  background: linear-gradient(135deg, rgba(255, 60, 166, .16), rgba(134, 92, 255, .14));
  border: 1px solid rgba(255, 60, 166, .42);
  box-shadow: 0 2px 18px rgba(255, 60, 166, .14);
  border-top-right-radius: 5px;
}
.px-bubble b { color: var(--pxa-cyan); font-weight: 700; }
.px-msg.user .px-bubble b { color: #ffb3e2; }
.px-bubble a { color: var(--pxa-cyan); text-decoration: underline; text-underline-offset: 3px; }
.px-bubble .px-code {
  font-family: var(--pxa-font-mono); font-size: 12px;
  background: rgba(66, 232, 255, .1); color: var(--pxa-cyan);
  border: 1px solid rgba(66, 232, 255, .25); border-radius: 6px; padding: 1px 5px;
}
.px-bubble .px-li { color: var(--pxa-purple); font-weight: 700; }
.px-bubble .px-mini {
  display: inline-block; width: 46px; height: 46px; object-fit: cover;
  border-radius: 8px; margin: 2px 4px 0 0; vertical-align: middle;
  border: 1px solid rgba(66, 232, 255, .35);
  box-shadow: 0 0 10px rgba(66, 232, 255, .18);
  transition: transform .15s;
}
.px-bubble .px-mini:hover { transform: scale(1.08); }

.px-caret {
  display: inline-block; width: 8px; height: 14px; margin-left: 3px; vertical-align: -2px;
  background: var(--pxa-cyan);
  box-shadow: 0 0 8px rgba(66, 232, 255, .8);
  animation: pxa-blink .8s steps(2) infinite;
}

/* 工具调用 chips */
.px-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.px-tool {
  display: inline-flex; align-items: center; gap: 6px;
  font: 10.5px/1 var(--pxa-font-mono); letter-spacing: .04em;
  padding: 5px 9px; border-radius: 8px;
  border: 1px dashed rgba(66, 232, 255, .4); color: var(--pxa-cyan);
  background: rgba(66, 232, 255, .06);
}
.px-tool.running { border-style: dashed; animation: pxa-dash 1.2s linear infinite; }
.px-tool.done { border-style: solid; border-color: rgba(181, 255, 114, .4); color: var(--pxa-lime); background: rgba(181, 255, 114, .05); }
.px-tool.err { border-style: solid; border-color: rgba(255, 107, 107, .45); color: #ff6b6b; background: rgba(255, 70, 70, .07); }
.px-spin {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 2px solid rgba(66, 232, 255, .25); border-top-color: var(--pxa-cyan);
  animation: pxa-rot .8s linear infinite;
}

/* 任务卡 */
.px-task {
  width: 88%; margin-top: 7px;
  background: rgba(9, 14, 24, .9);
  border: 1px solid rgba(134, 92, 255, .3); border-radius: 12px;
  padding: 9px 11px; overflow: hidden;
}
.px-task-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 10.5px/1.3 var(--pxa-font-mono); color: var(--text-2, #9cb2c9); }
.px-task-kind { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-task-status { flex: none; color: var(--pxa-cyan); }
.px-task.failed .px-task-status { color: #ff6b6b; }
.px-task.succeeded .px-task-status { color: var(--pxa-lime); }
.px-task-prompt { font-size: 12px; color: var(--text-2, #9cb2c9); margin: 5px 0 7px; opacity: .85; }
.px-task-bar {
  height: 7px; border-radius: 99px; overflow: hidden;
  background: rgba(66, 232, 255, .1);
  border: 1px solid rgba(66, 232, 255, .18);
}
.px-task-bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--pxa-pink), var(--pxa-purple), var(--pxa-cyan));
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(255, 60, 166, .5);
  transition: width .6s ease;
  animation: pxa-flow 2.4s linear infinite;
}
.px-task.succeeded .px-task-bar i { animation: none; background: var(--pxa-lime); box-shadow: 0 0 10px rgba(181, 255, 114, .5); }
.px-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.px-thumbs img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 9px; cursor: zoom-in;
  border: 1px solid rgba(66, 232, 255, .35);
  transition: transform .16s, box-shadow .16s;
}
.px-thumbs img:hover { transform: scale(1.06); box-shadow: 0 0 16px rgba(66, 232, 255, .4); }

/* ================= 底部输入区 ================= */

.px-agent-foot { flex: none; border-top: 1px solid var(--pxa-line); background: rgba(5, 8, 15, .55); position: relative; z-index: 2; }
/* 内置快捷话题：换行完整显示（原横向滚动会截断按钮且无滚动条提示），超高兜底纵向滚动 */
.px-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 12px 0; max-height: 132px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(66, 232, 255, .35) transparent; }
.px-quick::-webkit-scrollbar { width: 6px; }
.px-quick::-webkit-scrollbar-thumb { background: rgba(66, 232, 255, .35); border-radius: 8px; }
.px-quick-chip {
  flex: none; padding: 6px 11px; border-radius: 999px;
  font-size: 12px; color: var(--text-2, #9cb2c9);
  background: rgba(17, 26, 41, .85); border: 1px solid rgba(66, 232, 255, .18);
  transition: all .15s; white-space: nowrap;
}
.px-quick-chip:hover { color: var(--pxa-cyan); border-color: rgba(66, 232, 255, .55); box-shadow: 0 0 12px rgba(66, 232, 255, .18); transform: translateY(-1px); }

.px-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 9px 12px 6px; }
.px-input-row textarea {
  flex: 1; resize: none; max-height: 120px;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.5;
  background: rgba(17, 26, 41, .9);
  border: 1px solid rgba(66, 232, 255, .25); border-radius: 13px;
  color: var(--text, #eef7ff); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.px-input-row textarea:focus { border-color: var(--pxa-cyan); box-shadow: 0 0 0 3px rgba(66, 232, 255, .12), 0 0 18px rgba(66, 232, 255, .12); }
.px-input-row textarea:disabled { opacity: .6; }

.px-send {
  width: 42px; height: 42px; flex: none; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pxa-pink), var(--pxa-purple) 60%, var(--pxa-cyan));
  box-shadow: 0 4px 18px rgba(255, 60, 166, .4);
  transition: all .18s;
}
.px-send:hover { filter: brightness(1.15) saturate(1.1); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(66, 232, 255, .4); }
.px-send.stop { background: linear-gradient(135deg, #ff6b6b, #ff3ca6); }
.px-send svg { width: 18px; height: 18px; }

.px-foot-meta {
  padding: 0 14px 9px; text-align: center;
  font: 9.5px/1 var(--pxa-font-mono); letter-spacing: .06em;
  color: var(--text-3, #5b718b); opacity: .8;
}

/* ================= 动画 ================= */

@keyframes pxa-rot { to { transform: rotate(360deg); } }
@keyframes pxa-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pxa-breathe { 0%, 100% { box-shadow: inset 0 0 14px rgba(66, 232, 255, .25), 0 6px 22px rgba(0, 0, 0, .5); } 50% { box-shadow: inset 0 0 20px rgba(66, 232, 255, .45), 0 6px 26px rgba(66, 232, 255, .18); } }
@keyframes pxa-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pxa-bootin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pxa-dash { to { border-color: rgba(66, 232, 255, .1); } }
@keyframes pxa-flow { to { background-position: 200% 0; } }

/* ================= 响应式 & 无障碍 ================= */

@media (max-width: 640px) {
  .px-agent-panel { right: 8px; left: 8px; top: 8px; bottom: 8px; width: auto; }
  .px-agent-orb { right: 14px; bottom: 16px; width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .px-agent-panel, .px-msg, .px-boot-line { animation: none !important; transition: opacity .2s !important; }
  .px-orb-ring, .px-agent-frame::before, .px-orb-core, .px-task-bar i, .px-spin { animation: none !important; }
}

/* ================= @ 引用画布节点（R3） ================= */
.px-input-row { position: relative; }
.px-mention {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 30;
  background: rgba(12, 18, 29, .98);
  border: 1px solid var(--border-2, #2a3346);
  border-radius: 11px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.px-mention-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent;
  border: none; border-radius: 8px;
  color: var(--text, #e2ecf8);
  padding: 6px 9px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
}
.px-mention-row:hover { background: rgba(66, 232, 255, .1); }
.px-mention-kind { flex: none; }
.px-mention-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.px-mention-tag {
  flex: none;
  font-size: 10px;
  color: var(--text-3, #8fa1b8);
  background: rgba(66, 232, 255, .08);
  border-radius: 6px;
  padding: 1px 6px;
}
.px-refchips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 2px 6px; }
.px-refchip {
  background: rgba(66, 232, 255, .1);
  border: 1px solid rgba(66, 232, 255, .35);
  color: var(--cyan, #42e8ff);
  border-radius: 9px;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
}
.px-refchip:hover { background: rgba(255, 60, 166, .12); border-color: var(--pink, #ff3ca6); color: var(--pink, #ff3ca6); }
/* 已挂载技能徽标 chip（技能大厅「在对话中使用」）与消息内「打开画布」按钮（[[canvas:]] 令牌） */
.px-refchip.skill {
  color: #16202e; font-weight: 600;
  background: linear-gradient(180deg, rgba(240, 246, 255, 0.96), rgba(206, 218, 236, 0.92));
  border-color: transparent;
}
.px-cv-link {
  display: inline-flex; align-items: center; gap: 5px; margin: 4px 2px 0;
  border: 1px solid rgba(226, 236, 248, 0.3); border-radius: 999px;
  background: rgba(226, 236, 248, 0.08); color: inherit;
  padding: 3px 12px; font-size: 12px; cursor: pointer; transition: background 0.15s ease, transform 0.14s ease;
}
.px-cv-link:hover { background: rgba(226, 236, 248, 0.16); transform: translateY(-1px); }
.px-place-btn {
  margin-top: 6px;
  width: 100%;
  background: rgba(160, 124, 255, .1);
  border: 1px solid rgba(160, 124, 255, .4);
  color: #b9a3ff;
  border-radius: 9px;
  font-size: 11.5px;
  padding: 4px 8px;
  cursor: pointer;
}
.px-place-btn:hover { background: rgba(160, 124, 255, .18); }

/* Silver observatory — a quiet reading surface inside a machined instrument. */
.px-agent-panel {
  --pxa-cyan: #b9e6f5; --pxa-line: #c1d9f01c;
  width: min(var(--pxa-w, 460px), calc(100vw - 36px));
  border: 1px solid #c5d9ed38; border-radius: 24px;
  background: linear-gradient(145deg, #182330f5, #0c121cfb 42%, #101622fb);
  box-shadow: 0 32px 100px #0009, inset 0 1px #eef6ff25, 0 0 0 5px #10172250;
}
.px-agent-panel[hidden], .px-agent-orb[hidden] { display: none; }
.px-agent-frame { opacity: .4; padding: 1px; }
.px-agent-frame::before { animation-duration: 18s; background: conic-gradient(transparent 45%, #95accc, #ecf7ff, #908be5, transparent 85%); }
.px-agent-head { padding: 19px 18px; gap: 10px; background: linear-gradient(#d9eaff09, transparent); }
.px-head-title { font: 600 14px/1.3 ui-sans-serif, system-ui, sans-serif; letter-spacing: .17em; background-image: linear-gradient(100deg, #fff, #b8c9df 65%, #a8b6d9); }
.px-head-sub { font: 10px/1.6 ui-sans-serif, system-ui, sans-serif; color: #9faec2; letter-spacing: .04em; }
.px-led { width: 5px; height: 5px; background: #b7eadc; box-shadow: 0 0 9px #acdfcf80; animation: none; }
.px-brain-chip { font: 9px/1.2 ui-monospace, monospace; color: #c2d3e7; border-color: #b1c7e32c; background: #dbeaff08; text-shadow: none; }
.px-icon-btn { border-radius: 50%; border: 1px solid #d4e4f233; color: #c4d2e2; background: linear-gradient(145deg, #e1edff20, #71829d0a 50%, #c9dff51a); box-shadow: inset 0 1px #fff2, 0 3px 5px #0003; }
.px-icon-btn:hover { color: #fff; border-color: #e4f5ff88; background: #d5e7ff21; transform: translateY(-1px); }
.px-icon-btn:focus-visible, .px-send:focus-visible, .px-agent-orb:focus-visible, .px-quick-chip:focus-visible { outline: 2px solid #d3f0ff; outline-offset: 4px; }
.px-observatory { position: relative; flex: 0 0 143px; margin: 0 16px; overflow: hidden; border-bottom: 1px solid #c0d9ef1c; }
.px-silver-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.px-observatory-copy { position: relative; z-index: 1; padding: 27px 5px; pointer-events: none; }
.px-eyebrow { display: block; color: #9daec7; font: 8px/1.5 ui-monospace, monospace; letter-spacing: .19em; }
.px-observatory h3 { color: #eff5fd; font: 500 23px/1.5 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.04em; margin: 10px 0 3px; }
.px-observatory p { color: #a2b1c4; font-size: 10px; margin: 0; }
.px-orbit-caption { position: absolute; right: 9px; bottom: 13px; color: #8e9eb6; font: 7px/1 ui-monospace, monospace; letter-spacing: .16em; }
.px-agent-body { min-height: 80px; padding: 22px 20px 12px; background: radial-gradient(ellipse at 100% 0, #7373b20a, transparent 60%); scrollbar-color: #8298b44d transparent; }
.px-agent-body::before, .px-agent-body::after { display: none; }
.px-msg { margin-bottom: 20px; }
.px-bubble { font: 13px/1.85 ui-sans-serif, system-ui, sans-serif; padding: 14px 16px; border-radius: 16px; }
.px-msg.bot .px-bubble { background: linear-gradient(135deg, #d0e4ff0b, #a2b4d305); border: 1px solid #c4d9f017; box-shadow: inset 0 1px #ffffff06; color: #dbe5f3; }
.px-msg.user .px-bubble { background: linear-gradient(135deg, #425e7959, #635c8a35); border: 1px solid #c5def22b; color: #f2f7ff; }
.px-agent-foot { position: relative; padding: 5px 6px 7px; background: linear-gradient(#c8e0ff05, #0c131e); border-top: 1px solid #bfd7ee1c; }
.px-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 148px; padding: 10px 10px 3px; }
.px-quick-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
.px-quick-chip { text-align: left; white-space: normal; min-height: 37px; padding: 9px 11px; border-radius: 10px; color: #bfcee1; font-size: 11px; border-color: #b8d0ef1c; background: linear-gradient(130deg, #c9e4ff0a, #c9e4ff02); }
.px-quick-chip:hover { color: #f0f8ff; border-color: #b8d0ef66; background: #c9e4ff10; box-shadow: 0 3px 12px #0002; }
.px-input-row { padding: 11px 10px 12px; gap: 10px; align-items: center; }
.px-input-row textarea { min-width: 0; min-height: 52px; padding: 15px 13px; border-radius: 15px; color: #e4efff; background: #050b136b; border-color: #c4daee2b; font-family: ui-sans-serif, system-ui, sans-serif; }
.px-input-row textarea::placeholder { color: #8a9bb2; font-size: 12px; }
.px-input-row textarea:focus { border-color: #bad7ef80; box-shadow: 0 0 0 3px #bedaff09, inset 0 2px 10px #0003; }
.px-send { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #f2f8ffb0; color: #233247; background: linear-gradient(140deg, #f3f7ff, #a7b9cc 35%, #ebf2fa 49%, #94a5bb 72%, #dce8f4); box-shadow: inset 0 0 0 3px #c6d3e4, inset 0 0 0 4px #677c9877, 0 4px 0 #3e4e63, 0 6px 15px #0007; }
.px-send:hover { filter: brightness(1.12); box-shadow: inset 0 0 0 3px #dce6f2, inset 0 0 0 4px #677c9877, 0 4px 0 #3e4e63, 0 8px 20px #a9d3ff20; }
.px-send:active { transform: translateY(2px); }
.px-send.stop { color: white; border-color: #ffc0c6; box-shadow: inset 0 0 0 3px #e59ba64d, 0 4px 0 #682e44; }
.px-send:disabled { opacity: .45; filter: grayscale(1); cursor: not-allowed; transform: none; }
.px-foot-meta { font: 9px/1.6 ui-sans-serif, system-ui, sans-serif; color: #94a3b8; letter-spacing: .02em; padding: 0 9px 6px; }
.px-agent-orb { width: 64px; height: 64px; filter: drop-shadow(0 6px 12px #0007); }
.px-agent-orb:has(canvas) .px-orb-ring, .px-agent-orb:has(canvas) .px-orb-core { display: none; }
@media (max-width: 640px) {
  .px-agent-panel { width: auto; right: 8px; left: 8px; top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); border-radius: 19px; }
  .px-agent-head { padding: 15px 12px; gap: 7px; }
  .px-head-title { font-size: 12px; }
  .px-head-sub { font-size: 9px; }
  .px-agent-body { padding: 16px 12px 8px; }
  .px-observatory { flex-basis: 120px; }
  .px-observatory-copy { padding-top: 17px; }
  .px-observatory h3 { font-size: 21px; }
  .px-bubble { max-width: 94%; }
}
@media (max-height: 650px) { .px-observatory { display: none; } .px-quick { max-height: 84px; } }
@media (prefers-reduced-motion: reduce) {
  .px-agent-panel *, .px-agent-orb { animation: none !important; transition: none !important; }
}
.px-skill-mode { display:flex; align-items:center; gap:8px; margin:4px 0 8px; color:var(--muted,#9ca3af); font-size:12px; }
.px-skill-mode select { background:var(--panel,#171c25); color:inherit; border:1px solid var(--border,#343a46); border-radius:7px; padding:4px 8px; font:inherit; }