:root {
  --bg: #F5F5F7; --text: #1D1D1F; --text2: #6E6E73; --text3: #98989D; --line: rgba(0,0,0,.07);
  --idle: #34C759; --thinking: #FF9F0A; --working: #0A84FF; --offline: #AEAEB2;
  --glass: rgba(255,255,255,.66); --peek: 184px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; }
.app { position: fixed; inset: 0; }
.topbar { position: absolute; left: 22px; top: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; height: 32px; }
.topbar h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: .01em; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); padding: 4px 10px 4px 8px; border-radius: 99px; background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 10px rgba(0,0,0,.05); }
.conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--thinking); }
.conn[data-s=open] i { background: var(--idle); box-shadow: 0 0 0 3px rgba(52,199,89,.18); }
.conn[data-s=closed] i, .conn[data-s=failed] i { background: #FF453A; }
.stage { position: absolute; left: 8px; top: 52px; right: 360px; bottom: 8px; }
.stage canvas { width: 100%; height: 100%; display: block; touch-action: manipulation; }

.panel { position: absolute; top: 16px; right: 16px; bottom: 16px; width: 328px; display: flex; flex-direction: column; padding: 18px 14px 14px; border-radius: 26px; background: var(--glass); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 12px 40px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.9) inset; z-index: 6; overflow: hidden; }
.grab { display: none; }
.summary { display: flex; gap: 6px; padding: 0 4px 14px; }
.sum { flex: 1; text-align: center; padding: 8px 0 7px; border-radius: 14px; background: rgba(255,255,255,.6); }
.sum b { display: block; font-size: 20px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sum span { font-size: 11px; color: var(--text2); display: inline-flex; align-items: center; gap: 4px; }
.sum span i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: none; }
.item { display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; padding: 9px 10px; border-radius: 16px; cursor: pointer; transition: background .2s; position: relative; }
.item:hover, .item.sel { background: rgba(255,255,255,.7); }
.avatar { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 650; font-size: 16px; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.35); text-shadow: 0 1px 1px rgba(0,0,0,.12); }
.avatar::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--idle)); border: 2px solid #fff; }
.item[data-st=thinking] .avatar::after { animation: pulse 1.4s ease-in-out infinite; }
.item[data-st=working] .avatar::after { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 0%, transparent); } }
.item[data-st=offline] .avatar { filter: grayscale(.9); opacity: .6; }
.meta { min-width: 0; }
.row1 { display: flex; align-items: baseline; gap: 6px; }
.nm { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role { font-size: 11.5px; color: var(--text3); white-space: nowrap; }
.st { font-size: 12.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.st b { font-weight: 600; color: var(--c); }
.log { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); flex: 1; min-height: 0; display: flex; flex-direction: column; }
.log h2 { margin: 0 6px 8px; font-size: 12px; font-weight: 600; color: var(--text2); letter-spacing: .04em; }
.msgs { overflow-y: auto; flex: 1; padding: 0 4px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
.msgs::-webkit-scrollbar { display: none; }
.msg { display: grid; grid-template-columns: 8px 1fr; gap: 9px; font-size: 13px; line-height: 1.45; animation: fadein .35s ease; }
.msg i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.msg .who { font-weight: 600; font-size: 12px; } .msg .who s { text-decoration: none; color: var(--text3); font-weight: 400; }
.msg p { margin: 1px 0 0; color: #3A3A3C; }
.empty { color: var(--text3); font-size: 13px; text-align: center; margin: 14px 0; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 调试面板 */
.debug { position: absolute; left: 14px; top: 54px; z-index: 9; font-size: 12px; }
.dbtn { border: 0; border-radius: 99px; padding: 7px 14px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 2px 10px rgba(0,0,0,.08); cursor: pointer; }
.dbody { margin-top: 8px; padding: 10px; border-radius: 18px; background: var(--glass); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 8px 30px rgba(0,0,0,.1); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 520px; }
.dbody button { border: 0; border-radius: 11px; padding: 9px 6px; background: rgba(255,255,255,.8); cursor: pointer; font-size: 12.5px; }
.dbody button:active { background: #fff; transform: scale(.97); }
.dbody .full { grid-column: 1 / -1; }
.debug.collapsed .dbody { display: none; }

@media (max-width: 899px) {
  .topbar { left: 16px; top: 10px; }
  .topbar h1 { font-size: 17px; }
  .stage { left: 0; right: 0; top: 46px; bottom: calc(var(--peek) + env(safe-area-inset-bottom)); }
  .panel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; height: min(84vh, 720px); border-radius: 28px; padding: 0 12px 12px; transform: translateY(calc(100% - var(--peek) + 8px - env(safe-area-inset-bottom))); transition: transform .45s cubic-bezier(.22,1,.36,1); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .panel.open { transform: none; }
  .grab { display: block; width: 100%; height: 26px; border: 0; background: none; padding: 0; cursor: pointer; flex: none; }
  .grab span { display: block; width: 38px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.18); margin: 10px auto 0; }
  .summary { padding-bottom: 10px; }
  .sum { padding: 6px 0 5px; border-radius: 12px; } .sum b { font-size: 17px; }
  .panel:not(.open) .list { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; scroll-snap-type: x proximity; gap: 8px; }
  .panel:not(.open) .list::-webkit-scrollbar { display: none; }
  .panel:not(.open) .item { flex: none; width: 138px; grid-template-columns: 32px 1fr; gap: 8px; padding: 7px 9px; background: rgba(255,255,255,.62); scroll-snap-align: start; }
  .panel:not(.open) .avatar { width: 32px; height: 32px; border-radius: 11px; font-size: 14px; }
  .panel:not(.open) .role { display: none; }
  .panel:not(.open) .nm { font-size: 13.5px; } .panel:not(.open) .st { font-size: 11.5px; }
  .panel:not(.open) .log { display: none; }
  .panel.open .list { flex: none; }
  .debug { left: auto; right: 12px; top: 10px; text-align: right; } .dbody { text-align: left; }
  .dbody { width: 230px; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) and (min-height: 760px) { :root { --peek: 190px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.stage canvas { transition: filter .6s, opacity .6s; }
.stage.stale canvas { filter: grayscale(.7); opacity: .6; }