/* LAAP.design 门厅 · agent 工作台（液态奶油语言） */

.st-stage {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px 20px;
}

/* 液态奶油背景板：整池流动 + 指针扰动（液态光球的整页形态） */
#bgCanvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh; display: block;
}
body:has(#bgCanvas) { background: transparent; }

.st-msg { max-width: 86%; padding: 10px 16px; border-radius: 18px; font-size: 13.5px; line-height: 1.6; }
.st-msg.bot { align-self: flex-start; background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); }
.st-msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-fg); }

/* 可交互液态光球 logo */
.st-logo {
  width: 108px; height: 108px; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); box-shadow: var(--shadow-lift);
  transition: transform .4s var(--ease-spring), box-shadow .4s ease;
  animation: rise .8s var(--ease-expo) both;
}
.st-logo:hover { transform: scale(1.08) translateY(-2px); }
.st-logo:active { transform: scale(.96); }
.st-logo canvas { width: 100%; height: 100%; display: block; }

.st-brand {
  font-size: 34px; font-weight: 750; letter-spacing: -.02em;
  animation: rise .8s .08s var(--ease-expo) both;
}
.st-brand span {
  background: linear-gradient(135deg, #6b5ce7, #d4a5a5, #e6b89c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.st-sub {
  max-width: 560px; text-align: center; font-size: 14px; color: var(--muted);
  animation: rise .8s .14s var(--ease-expo) both;
}

.st-input {
  width: min(760px, 100%);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 28px;
  box-shadow: var(--shadow-lift);
  padding: 18px 18px 14px;
  animation: rise .8s .2s var(--ease-expo) both;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.st-input:focus-within { border-color: var(--muted); box-shadow: var(--shadow-lift), 0 0 0 4px rgba(107, 92, 231, .10); }
.st-input textarea {
  width: 100%; border: 0; background: transparent; resize: none; outline: none;
  font-family: inherit; font-size: 15.5px; line-height: 1.6; color: var(--ink);
}
.st-input textarea::placeholder { color: var(--muted); }

.st-attach { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.st-iconbtn {
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--glass); color: var(--ink);
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease-spring), background .2s;
}
.st-iconbtn:hover { transform: scale(1.08) rotate(90deg); background: var(--glass-strong); }

.st-mode {
  display: flex; gap: 4px; padding: 4px; height: 40px; align-items: center;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--line);
}
.st-modebtn {
  height: 32px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 650;
  background: transparent; color: var(--muted);
}
.st-modebtn.active { background: var(--accent); color: var(--accent-fg); }
.st-go { margin-left: auto; height: 40px; padding: 0 22px; border-radius: 999px; }

/* ── 统一控件语言：与 + / 快速·进阶 / 开始装配 同一血脉 ──
 *  一律 40px 胶囊、同一描边、同一玻璃；主按钮只是填充不同。
 *  （`.kt-chip/.kt-mini` 原住在 kits.css，studio 未加载，故在此归一） */
.kt-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 650;
  background: var(--glass); color: var(--muted);
  border: 1px solid var(--line);
  transition: transform .25s var(--ease-spring), color .2s, background .2s;
}
.kt-chip:hover { color: var(--ink); background: var(--glass-strong); transform: translateY(-1px); }
.kt-chip.active { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.kt-mini {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 650;
  background: var(--glass); color: var(--ink);
  border: 1px solid var(--line);
  transition: transform .25s var(--ease-spring), background .2s;
}
.kt-mini:hover { transform: scale(1.04); background: var(--glass-strong); }
.kt-mini.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

.st-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.st-file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink); max-width: 240px;
}
.st-file span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-file button { border: 0; background: none; color: var(--muted); cursor: pointer; }

.st-skills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px;
  animation: rise .8s .28s var(--ease-expo) both; }
.st-note { font-size: 11.5px; color: var(--muted); margin-top: 8px;
  animation: rise .8s .34s var(--ease-expo) both; }

.st-chat {
  width: min(760px, 100%); margin-top: 16px; padding: 16px 18px;
  border-radius: 24px; display: flex; flex-direction: column; gap: 10px;
  max-height: 340px; overflow-y: auto;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  animation: rise .5s var(--ease-expo) both;
}

/* 模型配置（BYOK） */
.st-llm {
  width: min(760px, 100%); margin-top: 14px; padding: 16px 18px;
  border-radius: 24px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  animation: rise .45s var(--ease-expo) both;
}
.st-llm-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.st-llm-head b { font-size: 14px; }
.st-llm-head span { font-size: 11.5px; color: var(--muted); }
.st-llm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.st-llm-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.st-llm-grid input, .st-llm-grid select {
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-family: inherit; font-size: 13px;
}
.st-llm-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.st-llm-foot #llmStatus { flex: 1; font-size: 12px; color: var(--muted); }

@media (max-width: 640px) {
  .st-go { width: 100%; margin-left: 0; }
  .st-attach { flex-wrap: wrap; }
}