/* 官网 KimpoAI 对话窗：产品组件样式（kimpoai.css，同步生成）之外，官网自己需要的几块。
 * ① WorkbenchRoot.vue 的布局规则（未整份同步，见 tools/sync-kimpoai-ui.mjs 头注），数值逐条照抄产品；
 * ② Naive NButton / NInput 在产品里由组件库出样式，官网没有 Naive，这里按产品钉定的尺寸（KaiButton 24/12/9、
 *    题组提交 32/13/14、「我来说」输入框 34/13/10）和 teyvat 主题色还原；
 * ③ 官网专属内容（体验积分、材料采用、安全验证）放在产品同款骨架里（CardShell / CreateSidebar 小节），不另起视觉。 */

/* ---- 字体：KimpoAI 根节点自设中文字体栈（WorkbenchRoot.vue .wb-root:not(.wb-root--compact)） ---- */
body .site-dialog .kai-shell,
body .site-dialog .kai-shell * { font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif !important; }

/* 产品里条件块是 v-if（不出 DOM）；官网用 hidden 属性，组件样式里的 display 不能盖过它。 */
.kai-shell [hidden] { display: none !important; }

/* KDialog 标题栏：标题块撑开，窗口控制靠右（原由已退役的 chat-dialog.css 提供）。 */
.kimpo-chat-dialog .chat-app-brand { flex: 1 1 auto; min-width: 0; }
/* 标题栏即会话头：标题为用户需求摘要，状态标签紧随其后（原中栏头 wb-root__middle-header 已移除）。 */
.kimpo-chat-dialog .chat-app-brand.kai-context { display: flex; align-items: center; gap: 10px; }
.kimpo-chat-dialog .chat-app-brand .kai-context__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kimpo-chat-dialog .chat-app-brand .wb-context-bar__status { flex: none; padding: 0 8px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 11px; font-weight: 400; line-height: 20px; white-space: nowrap; }
.kimpo-chat-dialog .chat-app-brand .wb-context-bar__status[data-tone='warn'] { background: #fef3c7; color: #92400e; }
.kimpo-chat-dialog .chat-app-brand .wb-context-bar__status[data-tone='err'] { background: #fdeeee; color: #e84f4f; }
.kimpo-chat-dialog .chat-app-header [hidden] { display: none !important; }
/* 「显示进度栏」移到标题栏，只在窄窗口（右栏为覆盖式）出现；宽窗口右栏常驻、不支持隐藏。 */
.kimpo-chat-dialog .chat-app-header .wb-root__show-right { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-right: 8px; padding: 0 10px; border: 1px solid var(--kai-line-2, #dcdfe6); border-radius: 6px; background: #fff; color: #606266; font-size: 12px; cursor: pointer; }
.kimpo-chat-dialog .chat-app-header .wb-root__show-right:hover { color: #303133; border-color: var(--kai-primary, #087bdf); }
.kimpo-chat-dialog .chat-app-header .wb-root__show-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kai-warn, #f59e0b); }
/* 手机宽度：标题栏只留图标按钮，状态标签让位给需求摘要。 */
@media (max-width: 640px) {
  .kimpo-chat-dialog .chat-app-header .wb-root__show-right { padding: 0 7px; margin-right: 4px; }
  .kimpo-chat-dialog .chat-app-header .kai-show-label,
  .kimpo-chat-dialog .chat-app-brand .wb-context-bar__status { display: none; }
}

/* ---- ① 布局（WorkbenchRoot.vue 1446-1813） ---- */
.kai-shell { position: relative; flex: 1 1 auto; min-height: 0; container-type: inline-size; container-name: kai-root; }
.kai-shell .wb-root {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  position: relative;
  color: var(--kai-ink);
  background: linear-gradient(-31.39deg, var(--kai-surface) 25.33%, color-mix(in srgb, var(--kai-primary) 3%, var(--kai-surface)) 88.98%);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.site-dialog.is-maximized .kai-shell .wb-root { border-radius: 0; }
.kai-shell .wb-root--no-right { grid-template-columns: minmax(0, 1fr); }
.kai-shell .wb-root--no-right .wb-root__right { display: none; }
.kai-shell .wb-root__middle { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.kai-shell .wb-root__middle-header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 68px;
  padding: 0 16px 0 12px; /* 同产品 d97067991：主区间距口径 24→12 */
  gap: 12px;
  background: var(--kai-surface);
  border-bottom: 1px solid var(--kai-line);
}
.kai-shell .wb-root__stream { flex: 1; min-height: 0; }
.kai-shell .wb-root__composer { width: min(920px, calc(100% - 24px)); align-self: center; flex: none; }
.kai-shell .wb-root__composer:not(.wb-root__composer--home) { margin-bottom: 12px; }
.kai-shell .wb-root__right { display: flex; flex-direction: column; min-height: 0; position: relative; overflow: hidden; }
.kai-shell .wb-root__right-inner { box-sizing: border-box; flex: 1; height: 100%; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--kai-line); background: var(--kai-surface); }
.kai-shell .wb-root__right-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  width: 320px;
  max-width: calc(100% - 48px);
  background: var(--kai-surface);
  border-left: 1px solid var(--kai-line);
  box-shadow: -8px 0 24px rgba(28, 33, 48, 0.12);
  animation: wb-overlay-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kai-shell .wb-root__right-overlay[hidden] { display: none; }
@keyframes wb-overlay-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* 「显示进度栏」（WorkbenchRoot.vue .wb-root__show-right）：只在右栏收起 / 窄容器时出现。 */
.kai-shell .wb-root__show-right {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--kai-line-2);
  border-radius: var(--kai-radius-control);
  background: var(--kai-surface);
  color: var(--kai-ink-2);
  font-size: 12px;
  cursor: pointer;
}
.kai-shell .wb-root__show-right:hover { color: var(--kai-ink); border-color: var(--kai-primary); }
.kai-shell .wb-root__show-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kai-warn); }
.kai-shell .wb-root:not(.wb-root--overlay-right) .wb-root__show-right { display: none; }

/* 会话头（ContextBar layout=full 的位置）：标题 + 状态胶囊 + 业务语言。 */
.kai-shell .kai-context { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.kai-shell .kai-context__title { min-width: 0; margin: 0; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--kai-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kai-shell .kai-context .wb-context-bar__status { flex: none; padding: 0 8px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 11px; line-height: 20px; white-space: nowrap; }
.kai-shell .kai-context .wb-context-bar__status[data-tone='warn'] { background: #fef3c7; color: #92400e; }
.kai-shell .kai-context .wb-context-bar__status[data-tone='err'] { background: #fdeeee; color: #e84f4f; }
.kai-shell .kai-locale {
  flex: none;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--kai-line-2);
  border-radius: var(--kai-radius-control);
  background: var(--kai-surface);
  color: var(--kai-ink-2);
  font-size: 12px;
  outline: none;
}
.kai-shell .kai-locale:focus-visible { border-color: var(--kai-primary); }

/* 首页空态交错排布（WorkbenchRoot.vue .wb-root__middle--home 一节）：Logo / 标题块 → 输入框 → 你可以试试。 */
.kai-shell .wb-root__middle--home { justify-content: safe center; overflow-y: auto; padding: 32px 0; }
.kai-shell .wb-root__middle--home .wb-root__middle-header { display: none; }
.kai-shell .wb-root__stream--home,
.kai-shell .wb-root__stream--home .wb-stream,
.kai-shell .wb-root__stream--home .wb-stream__empty,
.kai-shell .wb-root__stream--home .wb-empty-shell,
.kai-shell .wb-root__stream--home .wb-home-hero { display: contents; }
.kai-shell .wb-root__stream--home .wb-home-hero__logo { order: 1; align-self: center; }
.kai-shell .wb-root__stream--home .wb-home-hero__intro { order: 1; align-self: center; }
.kai-shell .wb-root__stream--home .wb-home-hero__try { order: 3; align-self: center; margin-top: 36px; }
.kai-shell .wb-root__stream--home ~ .kai-attachments { order: 2; }
.kai-shell .wb-root__composer--home { width: min(820px, calc(100% - 48px)); order: 2; min-height: 184px; }
.kai-shell .wb-root__middle--home > .kai-notice-line { order: 4; align-self: center; }

/* 产品里 SVG 以 v-html 内联；官网用 <img> 引同一份原件，补上同尺寸规则。 */
.kai-shell .wb-bubble__logo img,
.kai-shell .wb-home-hero__logo img,
.kai-shell .wb-home-hero__try-icon img,
.kai-shell .wb-home-hero__card-icon img,
.kai-shell .wb-composer__icon img { display: block; width: 100%; height: 100%; }
.kai-shell .wb-home-hero__logo-mark img { width: 66px; height: 45px; }
.kai-shell .wb-home-hero__logo-word img { width: 133.5px; height: 42px; }
.kai-shell .wb-home-hero__logo-ai img { width: 42.75px; height: 31.5px; }
.kai-shell .wb-home-hero__card-icon img { width: 24px; height: 24px; }

/* 容器查询断点（WorkbenchRoot.vue @container kai-root）：≤1439 右栏 300；≤1099 右栏改覆盖式。 */
@container kai-root (max-width: 1439px) {
  .kai-shell .wb-root { grid-template-columns: minmax(0, 1fr) 300px; }
  .kai-shell .wb-root--no-right { grid-template-columns: minmax(0, 1fr); }
.kai-shell .wb-root--no-right .wb-root__right { display: none; }
}
@container kai-root (max-width: 1099px) {
  .kai-shell .wb-root { grid-template-columns: minmax(0, 1fr); }
  .kai-shell .wb-root .wb-root__right { display: none; }
}
@container kai-root (max-width: 640px) {
  .kai-shell .wb-root__middle-header { min-height: 52px; padding: 0 12px; }
  .kai-shell .wb-stream { padding: 12px; }
  .kai-shell .wb-root__composer { width: calc(100% - 24px); }
  .kai-shell .wb-root__composer:not(.wb-root__composer--home) { margin-bottom: 12px; }
  .kai-shell .wb-root__composer--home { min-height: 140px; }
  .kai-shell .wb-home-hero__logo { gap: 10px; margin-bottom: 20px; }
  .kai-shell .wb-home-hero__logo-mark img { width: 44px; height: 30px; }
  .kai-shell .wb-home-hero__logo-word img { width: 89px; height: 28px; }
  .kai-shell .wb-home-hero__logo-ai img { width: 28.5px; height: 21px; }
  .kai-shell .wb-home-hero__headline { font-size: 24px; line-height: 34px; }
  .kai-shell .wb-home-hero__card { min-height: 0; padding: 12px 14px; gap: 12px; align-items: center; }
  .kai-shell .kai-locale { display: none; }
}

/* ---- ② Naive 按钮 / 输入框还原 ---- */
/* KaiButton：small 档钉 24 高 / 12px / 左右 9（描边计入），ghost 为 tiny 档左右 6（KaiButton.vue）。 */
.kai-shell .kai-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid #e0e0e6;
  border-radius: 4px;
  background: #fff;
  color: #333639;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.kai-shell .kai-btn:not(:disabled):hover { border-color: var(--kai-primary); color: var(--kai-primary); }
.kai-shell .kai-btn:not(:disabled):active { border-color: #0043a8; color: #0043a8; }
.kai-shell .kai-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kai-shell .kai-btn--primary { background: var(--kai-primary); border-color: var(--kai-primary); color: #fff; }
.kai-shell .kai-btn--primary:not(:disabled):hover { background: var(--kai-primary); color: #fff; }
.kai-shell .kai-btn--ghost { padding: 0 6px; border-color: transparent; background: transparent; }
.kai-shell .kai-btn--ghost:not(:disabled):hover { border-color: transparent; background: rgba(46, 51, 56, 0.09); color: #333639; }
.kai-shell .kai-btn--danger { border-color: var(--kai-err); background: transparent; color: var(--kai-err); }
.kai-shell .kai-btn--danger:not(:disabled):hover { border-color: #ed7272; color: #ed7272; }
/* 卡脚主按钮跟卡片语义色（CardShell.vue 末段 --n-color 覆盖）。 */
.kai-shell .wb-shell__actions .kai-btn--primary { background: var(--shell-tone); border-color: var(--shell-tone); color: #fff; }
.kai-shell .wb-shell__actions .kai-btn--primary:not(:disabled):hover { background: color-mix(in srgb, var(--shell-tone) 85%, white); border-color: var(--shell-tone); color: #fff; }
.kai-shell .wb-shell__actions .kai-btn--primary:not(:disabled):active { background: color-mix(in srgb, var(--shell-tone) 85%, black); }
/* 题组提交：NButton primary small，钉 32 / 13 / 14（QuestionGroupCardView.vue SUBMIT_BUTTON_TIERS）。 */
.kai-shell .qg__submit { height: 32px; padding: 0 14px; font-size: 13px; }
/* 「我来说」：NInput medium，钉 34 / 13 / 10（SAY_INPUT_TIERS）。 */
.kai-shell .qg__input {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #e0e0e6;
  border-radius: 4px;
  background: #fff;
  color: var(--kai-ink);
  font-size: 13px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.kai-shell .qg__input:hover { border-color: var(--kai-primary); }
.kai-shell .qg__input:focus { border-color: var(--kai-primary); box-shadow: 0 0 0 2px rgba(8, 119, 244, 0.2); }
.kai-shell .qg__input::placeholder { color: #c2c2c2; }

/* ---- ③ 官网专属内容，落在产品骨架里 ---- */
/* 卡体里的段落 / 小字（CardShell 卡体 12/20 口径）。 */
.kai-shell .wb-shell__body p { margin: 0; }
.kai-shell .wb-shell__body p + p { margin-top: 4px; }
.kai-shell .wb-card__text { margin: 0; overflow-wrap: anywhere; }
.kai-shell .kai-card-hint { color: var(--shell-hint); }
/* 流程图卡：泳道摘要沿用 CreateSidebar 的 cs__lane 视觉。 */
.kai-shell .kai-lanes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
/* 需求材料：输入框上方一条 CardShell 中性卡，与输入框同宽。 */
.kai-shell .kai-attachments { width: min(920px, calc(100% - 48px)); align-self: center; flex: none; margin-bottom: 8px; max-height: 32%; overflow: auto; scrollbar-width: thin; }
.kai-shell .kai-attachments[hidden] { display: none; }
.kai-shell .kai-att { border-top: 1px solid var(--kai-line); padding: 8px 0; }
.kai-shell .kai-att:first-of-type { border-top: 0; padding-top: 0; }
.kai-shell .kai-att > summary { cursor: pointer; color: var(--kai-ink); font-weight: 500; }
.kai-shell .kai-att__warn { color: var(--kai-warn-ink); }
.kai-shell .kai-att__block { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; }
.kai-shell .kai-att__text { margin-top: 2px; padding: 6px 8px; border-radius: 6px; background: var(--kai-surface-2); border: 1px solid var(--kai-line); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--kai-ink); }
.kai-shell .kai-att .kai-btn { margin: 6px 6px 0 0; }
/* 不可用 / 状态说明：首页空态输入框下方一行提示色小字。 */
.kai-shell .kai-notice-line { margin: 12px 0 0; font-size: 12px; line-height: 18px; color: var(--kai-muted-2); text-align: center; }
.kai-shell .kai-notice-line:empty { display: none; }
.kai-shell .wb-toast-host__item[data-tone='err'] { color: var(--kai-err); }
.kai-shell .wb-toast-host__item .kai-btn { margin-left: 4px; }
/* 进度栏底部免责说明可能有两行。 */
.kai-shell .cs__foot { padding-right: 16px; }
.kai-shell .cs__head { padding-right: 8px; }
.kai-shell .cs__credits-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--kai-muted-2); }

/* ==== 业务流程图 / 业务蓝图窗口（内容是 kimpoai/blueprint-ui.js 的产品同构 DOM，样式在 kimpoai/blueprint.css）==== */
/* 页头：标题后紧跟「第 n 稿」胶囊与「刚改了 n 处」（产品 BlueprintPage .bp-head 的排法），不让标题撑开把胶囊挤到右端。 */
.site-dialog .bsg-identity .site-dialog-title { flex: 0 1 auto; }
.site-dialog .bsg-identity .bp-head__chip,
.site-dialog .bsg-identity .bp-head__hint { flex: none; }
/* 官网 styles.css 有给页面骨架写的裸 footer / aside 元素规则（限宽居中、侧栏底色），产品同构内容里的 footer（.pc-foot / .bs-foot）与 aside（.bd-drawer）
   不能吃到：同等特异度、后加载，回到浏览器默认，再由产品类名规则定样式。 */
:where(.kai-scope) :is(footer, aside) { all: revert; }
/* 流程图窗：KDialog 外壳下整块交给 ProcessPage（产品 .bp-content--process：不留内边距、自身不滚，只有 .pc-scroll 滚）。 */
.site-dialog .process-main { flex: 1; min-height: 0; border-radius: 0 0 8px 8px; }
/* 蓝图窗左栏：历史版本一行 + BlueprintStepPage（只有 .bs-scroll 滚）；右栏仍是官网的修订表单。 */
.site-dialog .bsg-main.bsg-main--page { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.site-dialog .bsg-main--page > .bsg-history { flex: none; margin: 12px 20px 0; }
/* 产品的确认钮是 NButton（CONFIRM_BUTTON_TIERS：32 高 / 14px / 左右 16；可确认＝主色实心，否则禁用描边），这里按同一尺寸与配色还原。 */
.bs-foot__confirm {
  box-sizing: border-box;
  height: 32px;
  padding: 0 16px;
  border: 1px solid #e0e0e6;
  border-radius: 4px;
  background: #ffffff;
  color: #333639;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: not-allowed;
  opacity: 0.5;
}
.bs-foot__confirm--primary { border-color: #0877f4; background: #0877f4; color: #ffffff; cursor: pointer; opacity: 1; }
.bs-foot__confirm--primary:hover { border-color: var(--kai-primary); background: var(--kai-primary); color: #ffffff; }
.bs-foot__confirm:focus-visible { outline: 2px solid #83bbf9; outline-offset: 1px; }
/* 窄屏蓝图窗整体上下堆叠滚动：给蓝图页一个固定可视高度，页内仍是产品的唯一滚动区。 */
@media (max-width: 760px) {
  .site-dialog .bsg-main.bsg-main--page { height: min(720px, 82dvh); padding: 0; overflow: hidden; }
}