/* =============================================================================
 * EGO UI Taste v3 — 基于 taste-skill redesign（保留功能，升级氛围）
 * Design read: 移动端 AI 伴侣 · 侦探暖调 noir · Soft Structuralism
 * Dials: VARIANCE 5 · MOTION 4 · DENSITY 3
 * 参考: F:\BblKj\vendor\taste-skill (redesign-skill + soft-skill)
 * ============================================================================= */

:root {
  --t-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;

  /* 暖色深底 — 取代青蓝 AI 渐变 */
  --c-bg:            #0B0D11;
  --c-bg2:           #12151C;
  --c-card:          rgba(24, 27, 34, 0.82);
  --c-card2:         #1A1E28;
  --c-border:        rgba(255, 255, 255, 0.08);
  --c-border2:       rgba(255, 255, 255, 0.14);
  --c-divider:       rgba(255, 255, 255, 0.06);

  --c-text1:         #F4F0EA;
  --c-text2:         #A8A29E;
  --c-text3:         #78716C;
  --c-text4:         #57534E;

  --c-primary:       #C9A96E;
  --c-primary-bg:    rgba(201, 169, 110, 0.14);
  --c-primary-text:  #E8D4B0;
  --c-sky:           #8B9DC3;
  --c-sky-bg:        rgba(139, 157, 195, 0.12);
  --c-danger:        #E07A7A;
  --c-danger-bg:     rgba(224, 122, 122, 0.12);
  --c-success:       #6BBF8A;
  --c-warning:       #D4A574;

  --c-nav-bg:        rgba(18, 21, 28, 0.88);
  --c-nav-border:    rgba(255, 255, 255, 0.09);
  --c-input-bg:      rgba(24, 27, 34, 0.92);
  --c-input-border:  rgba(255, 255, 255, 0.1);
  --c-overlay:       rgba(8, 10, 14, 0.68);

  --s-sm:  0 2px 10px rgba(8, 10, 14, 0.32);
  --s-md:  0 6px 24px rgba(8, 10, 14, 0.38);
  --s-lg:  0 12px 40px rgba(8, 10, 14, 0.44);
  --s-xl:  0 20px 56px rgba(8, 10, 14, 0.5);

  --brand-grad: linear-gradient(135deg, #D4B483 0%, #A8845A 100%);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-ring: 1px solid rgba(255, 255, 255, 0.1);

  /* 排版尺度（全局） */
  --t-display:  clamp(22px, 5.6vw, 26px);
  --t-title:    17px;
  --t-subtitle: 15px;
  --t-body:     15px;
  --t-body-sm:  14px;
  --t-caption:  12px;
  --t-label:    12px;
  --t-label-sm: 11px;
  --t-micro:    10px;
  --t-leading-tight: 1.25;
  --t-leading:     1.55;
  --t-leading-loose: 1.68;
  --t-track-tight: -0.02em;
  --t-track-label: 0.04em;
  --t-page-x:   max(20px, env(safe-area-inset-left, 0px));
  --t-page-x-right: max(20px, env(safe-area-inset-right, 0px));
  --t-section-gap: 28px;
  --t-field-gap:   18px;
  --t-stack-gap:   12px;
}

html.theme-light,
body.theme-light {
  --c-bg:            #F7F5F0;
  --c-bg2:           #EFEBE3;
  --c-card:          rgba(255, 255, 255, 0.92);
  --c-card2:         #FFFFFF;
  --c-border:        rgba(28, 25, 23, 0.08);
  --c-border2:       rgba(28, 25, 23, 0.12);
  --c-divider:       rgba(28, 25, 23, 0.06);

  --c-text1:         #1C1917;
  --c-text2:         #57534E;
  --c-text3:         #78716C;
  --c-text4:         #A8A29E;

  --c-primary:       #9A7B4F;
  --c-primary-bg:    rgba(154, 123, 79, 0.1);
  --c-primary-text:  #7C6238;
  --c-sky:           #6B7280;
  --c-sky-bg:        rgba(107, 114, 128, 0.08);

  --c-nav-bg:        rgba(255, 255, 255, 0.92);
  --c-nav-border:    rgba(28, 25, 23, 0.08);
  --c-input-bg:      #FFFFFF;
  --c-input-border:  rgba(28, 25, 23, 0.1);
  --c-overlay:       rgba(28, 25, 23, 0.42);

  --s-sm:  0 2px 10px rgba(28, 25, 23, 0.06);
  --s-md:  0 6px 24px rgba(28, 25, 23, 0.08);
  --s-lg:  0 12px 40px rgba(28, 25, 23, 0.1);
  --s-xl:  0 20px 56px rgba(28, 25, 23, 0.12);

  --brand-grad: linear-gradient(135deg, #C4A574 0%, #8B6914 100%);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --glass-ring: 1px solid rgba(28, 25, 23, 0.08);
}

/* Web 预览：Plus Jakarta Sans（真机用系统字体栈） */
body:not(.native-app) {
  font-family: "Plus Jakarta Sans", var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
.screen,
.page {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body:not(.theme-light) .screen {
  background: radial-gradient(120% 90% at 50% -10%, #161922 0%, var(--c-bg) 58%, #080A0E 100%) !important;
}

body.theme-light .screen {
  background: radial-gradient(120% 80% at 50% -15%, #FFFFFF 0%, var(--c-bg) 52%, #EFEBE3 100%) !important;
}

/* ---- 顶栏标题 ---- */
.home-ego-picker-label,
.me-topbar-title,
.create-topbar-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.25;
  padding: 2px 0;
}

.home-ego-ver {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px !important;
  font-weight: 500;
}

/* ---- 底部输入岛（Double-Bezel 简化版）---- */
body.native-app .composer {
  border-radius: 22px !important;
  border: var(--glass-ring) !important;
  box-shadow: var(--s-md), var(--glass-highlight) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  transition: box-shadow 0.28s var(--t-ease), border-color 0.28s var(--t-ease);
}

body.native-app:not(.theme-light) .composer {
  background: rgba(22, 26, 34, 0.78) !important;
}

body.theme-light .composer {
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--s-md), var(--glass-highlight) !important;
}

.composer .ico,
.composer .mic {
  border-radius: 14px !important;
  transition: transform 0.22s var(--t-ease), background 0.22s var(--t-ease);
}

.composer .ico:active,
.composer .mic:active {
  transform: scale(0.94);
}

/* ---- Tab 栏玻璃浮岛 ---- */
body.native-app .tabbar {
  border-radius: 24px !important;
  border: var(--glass-ring) !important;
  box-shadow: var(--s-lg), var(--glass-highlight) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
}

body.native-app:not(.theme-light) .tabbar {
  background: linear-gradient(180deg, rgba(28, 32, 40, 0.9), rgba(16, 19, 26, 0.92)) !important;
}

body.theme-light .tabbar {
  background: rgba(255, 255, 255, 0.94) !important;
}

body.native-app .tabbar button {
  transition: transform 0.22s var(--t-ease), opacity 0.22s var(--t-ease);
}

body.native-app .tabbar button:active {
  transform: scale(0.94);
}

body.theme-light .tabbar button.active .dot {
  background: var(--brand-grad) !important;
}

/* ---- 主按钮 / 强调色 ---- */
.btn-primary,
.create-action-btn,
.home-ego-mode-opt[data-selected="1"] {
  background: var(--brand-grad) !important;
  box-shadow: 0 4px 18px rgba(201, 169, 110, 0.28) !important;
  transition: transform 0.22s var(--t-ease), box-shadow 0.22s var(--t-ease);
}

.btn-primary:active,
.create-action-btn:active {
  transform: scale(0.98);
}

/* ---- 首页科技背景 veil（轻遮罩，保留底图渐变） ---- */
body:not(.theme-light) .home-chat-bg-veil {
  background: linear-gradient(180deg,
    rgba(5, 7, 13, 0.06) 0%,
    rgba(11, 13, 17, 0.08) 35%,
    rgba(11, 13, 17, 0.14) 100%) !important;
}

body.theme-light .home-chat-bg-veil {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(247, 245, 240, 0.06) 35%,
    rgba(247, 245, 240, 0.12) 100%) !important;
}

/* ---- 首页气泡（暖色玻璃）：大幅透明底，文字不变 ---- */
.page[data-page="home"].active .chat-row.user .chat-bubble {
  background: rgba(201, 169, 110, 0.03) !important;
  border-color: rgba(201, 169, 110, 0.06) !important;
  color: rgba(255, 252, 245, 0.62) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  backdrop-filter: blur(3px) saturate(120%);
}

.page[data-page="home"].active .chat-row.assistant .chat-bubble,
.page[data-page="home"].active .home-chat-col.has-home-chat-bg .chat-row.assistant .chat-bubble {
  background: rgba(24, 27, 34, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  color: rgba(244, 240, 234, 0.62) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  backdrop-filter: blur(3px) saturate(120%);
}

body.theme-light .page[data-page="home"].active .chat-row.user .chat-bubble,
body.theme-light .page[data-page="home"].active .home-chat-col.has-home-chat-bg .chat-row.user .chat-bubble {
  background: rgba(154, 123, 79, 0.03) !important;
  border-color: rgba(154, 123, 79, 0.06) !important;
  color: rgba(28, 25, 23, 0.62) !important;
}

body.theme-light .page[data-page="home"].active .chat-row.assistant .chat-bubble,
body.theme-light .page[data-page="home"].active .home-chat-col.has-home-chat-bg .chat-row.assistant .chat-bubble {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(28, 25, 23, 0.04) !important;
  color: rgba(28, 25, 23, 0.62) !important;
}

/* ---- 开场白 chip ---- */
.home-opener-chip {
  color: rgba(244, 240, 234, 0.78) !important;
  background: rgba(201, 169, 110, 0.12) !important;
  border: 1px solid rgba(201, 169, 110, 0.22) !important;
  box-shadow: 0 4px 16px rgba(8, 10, 14, 0.14) !important;
  border-radius: 16px !important;
  transition: transform 0.22s var(--t-ease), opacity 0.22s var(--t-ease), box-shadow 0.22s var(--t-ease);
}

body.theme-light .home-opener-chip {
  color: rgba(28, 25, 23, 0.74) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(154, 123, 79, 0.14) !important;
}

.home-opener-chip:active {
  transform: scale(0.97) !important;
}

/* ---- 卡片通用 ---- */
.me-profile-card,
.create-genre-card,
.agents-sq-card,
.kb-item-card {
  border-radius: 18px !important;
  box-shadow: var(--s-sm) !important;
  transition: transform 0.24s var(--t-ease), box-shadow 0.24s var(--t-ease);
}

/* ---- 开屏：与 boot-splash.png 边缘同色，全屏 cover 无黑边 ---- */
.app-splash {
  background: #E5F2FB !important;
}

body.theme-light .app-splash,
html.theme-light .app-splash {
  background: #E5F2FB !important;
}

.splash-sub {
  color: var(--c-text3) !important;
  letter-spacing: 0.02em;
}

/* =============================================================================
 * 全局文字层级
 * ============================================================================= */
body,
.screen,
.page,
.chat-bubble,
.composer-input {
  font-size: var(--t-body);
  line-height: var(--t-leading);
  color: var(--c-text1);
}

p, .create-genre-text .d {
  text-wrap: pretty;
}

.text-text1 { color: var(--c-text1) !important; }
.text-text2 { color: var(--c-text2) !important; }
.text-text3 { color: var(--c-text3) !important; }

/* =============================================================================
 * 创作页 · 页面边距与表单（原生无 Tailwind 时必须靠此类名）
 * ============================================================================= */
.create-page-inset,
.create-form-page {
  box-sizing: border-box;
  padding:
    12px
    var(--t-page-x-right)
    calc(12px + env(safe-area-inset-bottom, 0px))
    var(--t-page-x);
  max-width: 100%;
  min-height: 0;
}

#createModule.create-flow-scroll {
  scroll-padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.create-form-page-title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: var(--t-subtitle);
  font-weight: 600;
  letter-spacing: var(--t-track-tight);
  line-height: var(--t-leading-tight);
  color: var(--c-text1);
}

.create-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--t-field-gap);
}

.create-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-form-label {
  display: block;
  margin: 0;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--t-track-label);
  text-transform: none;
  color: var(--c-text3);
  line-height: 1.35;
}

.create-form-label--sm {
  font-size: var(--t-label-sm);
}

.create-form-label-hint {
  font-weight: 400;
  color: var(--c-text4);
}

/* 原生 APK：补全原先仅 Tailwind 生效的 input 布局 */
#createModule .name-input,
.create-form-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  font-size: var(--t-body-sm);
  font-weight: 400;
  line-height: var(--t-leading);
  letter-spacing: -0.01em;
  color: var(--c-text1);
  background: var(--c-input-bg);
  border: var(--glass-ring);
  border-radius: 14px;
  padding: 13px 14px;
  min-height: 48px;
  box-shadow: var(--s-sm), var(--glass-highlight);
  transition: border-color 0.22s var(--t-ease), box-shadow 0.22s var(--t-ease);
}

#createModule textarea.name-input,
#createModule textarea.create-form-input {
  min-height: 88px;
  resize: vertical;
  line-height: var(--t-leading-loose);
}

#createModule select.name-input,
#createModule select.create-form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

#createModule .name-input::placeholder,
.create-form-input::placeholder {
  color: var(--c-text4);
  font-weight: 400;
}

#createModule .name-input:focus,
.create-form-input:focus {
  outline: none;
  border-color: rgba(201, 169, 110, 0.45);
  box-shadow: 0 0 0 3px var(--c-primary-bg), var(--s-sm);
}

/* 体裁选择列表 */
.create-pick-genre .create-genre-list {
  gap: 14px;
}

.create-genre-row {
  padding: 16px !important;
  border-radius: 18px !important;
  border: var(--glass-ring) !important;
  background: var(--c-card) !important;
  box-shadow: var(--s-sm), var(--glass-highlight) !important;
  gap: 14px !important;
  align-items: center !important;
}

.create-genre-main {
  gap: 14px !important;
  align-items: center !important;
}

.create-genre-thumb-wrap {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  margin-top: 0 !important;
  align-self: center !important;
  border-radius: 16px !important;
  box-shadow: var(--s-sm);
}

.create-genre-text {
  gap: 6px !important;
  padding-top: 2px;
}

.create-genre-text .t {
  font-family: var(--font-display) !important;
  font-size: var(--t-subtitle) !important;
  font-weight: 600 !important;
  letter-spacing: var(--t-track-tight) !important;
  line-height: var(--t-leading-tight) !important;
  color: var(--c-text1) !important;
}

.create-genre-text .d {
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading-loose) !important;
  color: var(--c-text2) !important;
  max-width: 42em;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.create-genre-start {
  align-self: center !important;
  margin-top: 0 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-size: var(--t-caption) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  background: var(--brand-grad) !important;
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.28) !important;
  transition: transform 0.22s var(--t-ease);
}

.create-quote-block--top {
  margin-bottom: var(--t-section-gap) !important;
  padding: 18px 18px 20px !important;
  border-radius: 18px !important;
  border: var(--glass-ring) !important;
  background: var(--c-card) !important;
  box-shadow: var(--s-sm) !important;
}

.create-quote-block--top .create-quote-line {
  font-size: var(--t-body-sm) !important;
  line-height: var(--t-leading-loose) !important;
  font-style: italic;
  color: var(--c-text2) !important;
}

.create-quote-block--top .create-quote-author {
  margin-top: 10px !important;
  font-size: var(--t-caption) !important;
  color: var(--c-text3) !important;
}

/* 类别下拉 */
.create-subtype-picker {
  margin-bottom: 0 !important;
}

.create-subtype-toggle {
  min-height: 48px !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  font-size: var(--t-body-sm) !important;
  border: var(--glass-ring) !important;
  background: var(--c-input-bg) !important;
  box-shadow: var(--s-sm), var(--glass-highlight);
}

.create-subtype-panel {
  border-radius: 16px !important;
  padding: 8px !important;
  border: var(--glass-ring) !important;
  background: var(--c-card2) !important;
  box-shadow: var(--s-lg) !important;
}

.create-subtype-panel button {
  border-radius: 10px !important;
  padding: 11px 12px !important;
  font-size: var(--t-body-sm) !important;
  line-height: var(--t-leading);
}

.create-subtype-panel button.on {
  background: var(--c-primary-bg) !important;
  color: var(--c-primary-text) !important;
}

/* 底部操作区 */
.create-action-stack {
  gap: 14px !important;
  margin-top: var(--t-section-gap) !important;
  padding-top: 4px;
}

.create-inspire-optional-label {
  font-size: var(--t-label) !important;
  font-weight: 500 !important;
  letter-spacing: var(--t-track-label);
  color: var(--c-text2) !important;
  margin-bottom: 10px !important;
}

.create-inspire-image-btn {
  border-radius: 14px !important;
  min-height: 48px !important;
  font-size: var(--t-body-sm) !important;
  border: 1px dashed rgba(201, 169, 110, 0.38) !important;
  color: var(--c-text2) !important;
  background: var(--c-primary-bg) !important;
}

.create-start-btn,
.create-action-bar-btn#createSubtypeNext {
  min-height: 52px !important;
  border-radius: 16px !important;
  font-size: var(--t-subtitle) !important;
  font-weight: 600 !important;
  letter-spacing: var(--t-track-tight);
  border: none !important;
  background: var(--brand-grad) !important;
  color: #FFFBF5 !important;
  box-shadow: 0 8px 24px rgba(201, 169, 110, 0.32) !important;
}

.create-start-btn:active,
.create-action-bar-btn#createSubtypeNext:active {
  transform: scale(0.98);
}

/* 创作顶栏 */
.create-topbar-title {
  font-family: var(--font-display) !important;
  font-size: var(--t-title) !important;
  font-weight: 600 !important;
  letter-spacing: var(--t-track-tight) !important;
}

/* 智能体广场标题 */
.agents-sq-head-title {
  font-family: var(--font-display);
  letter-spacing: var(--t-track-tight);
}

.agents-sq-card-name {
  font-size: var(--t-subtitle) !important;
  font-weight: 600 !important;
  letter-spacing: var(--t-track-tight);
  line-height: var(--t-leading-tight) !important;
}

.agents-sq-card-desc {
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading-loose) !important;
}

/* 首页顶栏 */
.home-ego-picker-label {
  font-size: var(--t-subtitle) !important;
  font-weight: 600 !important;
}

.chat-bubble {
  font-size: var(--t-body-sm) !important;
  line-height: var(--t-leading-loose) !important;
  letter-spacing: -0.005em;
}

/* —— 通用：无 Tailwind 时的工具类 —— */
.hidden { display: none !important; }

.drawer-empty-hint {
  font-size: var(--t-caption);
  color: var(--c-text3);
  padding: 16px var(--t-page-x);
  line-height: var(--t-leading);
  text-align: center;
}

/* =============================================================================
 * 智能体广场
 * ============================================================================= */
.page[data-page="agents"].active {
  background: var(--c-bg) !important;
}

.agents-sq-tabs-wrap {
  background: var(--c-nav-bg) !important;
  border-bottom-color: var(--c-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

.agents-sq-tab {
  font-size: var(--t-subtitle) !important;
  color: var(--c-text3) !important;
  min-height: 44px !important;
}

.agents-sq-tab.is-active {
  color: var(--c-text1) !important;
  font-weight: 600 !important;
}

.agents-sq-tab.is-active::after {
  background: var(--c-primary) !important;
  width: 32px !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
}

.agents-sq-scroll {
  padding: 14px var(--t-page-x) 12px var(--t-page-x-right) !important;
  background: var(--c-bg) !important;
}

.agents-sq-hero-sub {
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading) !important;
}

.hero-title-glow {
  background: linear-gradient(100deg, #E8D4B0 0%, #ffffff 40%, #C9A96E 100%) !important;
}

.agents-sq-grid {
  gap: 12px !important;
}

.agents-sq-card {
  border-radius: 16px !important;
  min-height: 118px !important;
  padding: 14px 12px 14px 14px !important;
  background: var(--c-card) !important;
  border: var(--glass-ring) !important;
  box-shadow: var(--s-sm), var(--glass-highlight) !important;
}

body.theme-light .agents-sq-card {
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--s-sm) !important;
}

body:not(.theme-light) .agents-sq-card-tag,
body.theme-light .agents-sq-card-tag {
  color: var(--c-primary) !important;
}

body:not(.theme-light) .agents-sq-card-badge,
body.theme-light .agents-sq-card-badge {
  color: var(--c-primary-text) !important;
}

.agents-sq-card-title,
.agents-sq-card-title-line {
  font-size: var(--t-subtitle) !important;
  font-weight: 600 !important;
  letter-spacing: var(--t-track-tight);
  line-height: var(--t-leading-tight) !important;
  color: var(--c-text1) !important;
}

.agents-sq-card-tag {
  font-size: var(--t-label-sm) !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.agents-sq-card-desc {
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading-loose) !important;
  color: var(--c-text3) !important;
  margin-top: 6px !important;
}

.agents-sq-disclaimer {
  margin: 14px 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading-loose) !important;
  color: var(--c-text3) !important;
  background: var(--c-card) !important;
  border: var(--glass-ring) !important;
}

.agents-sq-row {
  border-radius: 16px !important;
  padding: 14px 16px !important;
  background: var(--c-card) !important;
  border: var(--glass-ring) !important;
  box-shadow: var(--s-sm) !important;
}

.agents-sq-title {
  font-size: var(--t-subtitle) !important;
  font-weight: 600 !important;
  color: var(--c-text1) !important;
}

.agents-sq-desc {
  font-size: var(--t-body-sm) !important;
  line-height: var(--t-leading-loose) !important;
  color: var(--c-text3) !important;
}

.agents-sq-badge-official {
  background: var(--c-primary) !important;
  color: #FFFBF5 !important;
  font-size: var(--t-micro) !important;
  border-radius: 6px !important;
}

.agents-sq-create-btn {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: var(--t-body-sm) !important;
  border: 1px dashed rgba(201, 169, 110, 0.38) !important;
  color: var(--c-text2) !important;
  background: var(--c-primary-bg) !important;
}

/* 我的智能体 · 编辑器 */
.agents-mine-editor {
  padding: 0 0 24px !important;
}

.agents-mine-field {
  margin-bottom: var(--t-field-gap) !important;
}

.agents-mine-field label {
  display: block;
  font-size: var(--t-label) !important;
  font-weight: 500 !important;
  letter-spacing: var(--t-track-label);
  color: var(--c-text2) !important;
  margin-bottom: 8px !important;
}

.agents-mine-field-hint {
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading) !important;
  color: var(--c-text3) !important;
  margin-top: 6px !important;
}

.agents-mine-input,
.agents-mine-textarea {
  width: 100%;
  min-height: 48px !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: var(--t-body-sm) !important;
  line-height: var(--t-leading) !important;
  border: var(--glass-ring) !important;
  background: var(--c-input-bg) !important;
  color: var(--c-text1) !important;
  box-shadow: var(--s-sm), var(--glass-highlight);
}

.agents-mine-input:focus,
.agents-mine-textarea:focus {
  outline: none;
  border-color: rgba(201, 169, 110, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.14) !important;
}

.agents-mine-textarea {
  min-height: 96px !important;
}

.agents-mine-section {
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: var(--t-field-gap) !important;
  background: var(--c-card) !important;
  border: var(--glass-ring) !important;
}

.agents-mine-section-title {
  font-size: var(--t-subtitle) !important;
  font-weight: 600 !important;
  color: var(--c-text1) !important;
  letter-spacing: var(--t-track-tight);
}

.agents-mine-section-sub {
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading) !important;
  color: var(--c-text3) !important;
  margin-top: 4px !important;
}

.agents-mine-toggle-label {
  font-size: var(--t-body-sm) !important;
  font-weight: 500 !important;
  color: var(--c-text1) !important;
}

.agents-mine-toggle-desc {
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading) !important;
  color: var(--c-text3) !important;
}

.agents-mine-switch.is-on {
  background: var(--brand-grad) !important;
}

.agents-mine-btn {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: var(--t-body-sm) !important;
  font-weight: 600 !important;
}

.agents-mine-btn-primary {
  background: var(--brand-grad) !important;
  color: #FFFBF5 !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(201, 169, 110, 0.28) !important;
}

/* =============================================================================
 * 我的
 * ============================================================================= */
.me-topbar {
  padding: 14px var(--t-page-x) 8px var(--t-page-x-right) !important;
}

.me-topbar-title {
  font-family: var(--font-display) !important;
  font-size: var(--t-title) !important;
  font-weight: 600 !important;
  letter-spacing: var(--t-track-tight) !important;
}

.me-user-card {
  margin: 10px var(--t-page-x) 0 var(--t-page-x-right) !important;
  padding: 18px 16px !important;
  border-radius: 18px !important;
  background: var(--c-card) !important;
  border: var(--glass-ring) !important;
  box-shadow: var(--s-sm), var(--glass-highlight) !important;
}

.me-avatar-wrap {
  background: var(--brand-grad) !important;
}

.me-user-name {
  font-size: var(--t-subtitle) !important;
  font-weight: 600 !important;
  letter-spacing: var(--t-track-tight);
}

.me-user-sub {
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading) !important;
}

.me-section-card {
  margin: var(--t-section-gap) var(--t-page-x) 0 var(--t-page-x-right) !important;
  border-radius: 18px !important;
  background: var(--c-card) !important;
  border: var(--glass-ring) !important;
  box-shadow: var(--s-sm) !important;
  overflow: hidden;
}

.me-row {
  min-height: 52px !important;
  padding: 14px 16px !important;
}

.me-row-title {
  font-size: var(--t-body-sm) !important;
  font-weight: 500 !important;
  color: var(--c-text1) !important;
}

.me-row-meta {
  font-size: var(--t-caption) !important;
  color: var(--c-text3) !important;
  margin-top: 2px !important;
}

.me-row-icon.icon-bg-blue,
.me-row-icon.icon-bg-teal {
  background: var(--c-primary-bg) !important;
}

.me-row-icon.icon-bg-purple {
  background: rgba(139, 157, 195, 0.14) !important;
}

.me-theme-seg button.on {
  background: var(--c-primary-bg) !important;
  color: var(--c-primary-text) !important;
}

.me-logout-btn {
  margin: var(--t-section-gap) var(--t-page-x) 32px var(--t-page-x-right) !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: var(--t-body-sm) !important;
  font-weight: 500 !important;
}

/* =============================================================================
 * 知识库
 * ============================================================================= */
.kb-topbar {
  padding: 8px var(--t-page-x) 10px var(--t-page-x-right) !important;
}

.kb-topbar-title {
  font-family: var(--font-display) !important;
  font-size: var(--t-title) !important;
  font-weight: 600 !important;
  letter-spacing: var(--t-track-tight) !important;
}

.kb-search-wrap {
  padding: 0 var(--t-page-x) 12px var(--t-page-x-right) !important;
}

.kb-search-bar {
  min-height: 44px !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  background: var(--c-input-bg) !important;
  border: var(--glass-ring) !important;
}

.kb-search-input {
  font-size: var(--t-body-sm) !important;
}

.kb-filter-tabs {
  padding: 0 var(--t-page-x) 12px var(--t-page-x-right) !important;
  gap: 8px !important;
}

.kb-filter-tab {
  font-size: var(--t-caption) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  min-height: 34px !important;
}

.kb-filter-tab.on {
  background: var(--c-primary-bg) !important;
  color: var(--c-primary-text) !important;
  border-color: rgba(201, 169, 110, 0.35) !important;
}

.kb-scroll-area {
  padding: 4px var(--t-page-x) 24px var(--t-page-x-right) !important;
}

.kb-section-head {
  margin: var(--t-stack-gap) 0 10px !important;
}

.kb-section-label {
  font-size: var(--t-label) !important;
  font-weight: 500 !important;
  letter-spacing: var(--t-track-label);
  color: var(--c-text2) !important;
}

.kb-item-card {
  border-radius: 16px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  background: var(--c-card) !important;
  border: var(--glass-ring) !important;
  box-shadow: var(--s-sm) !important;
}

.kb-item-name {
  font-size: var(--t-subtitle) !important;
  font-weight: 600 !important;
  letter-spacing: var(--t-track-tight);
}

.kb-item-meta {
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading) !important;
  color: var(--c-text3) !important;
  margin-top: 4px !important;
}

.kb-picker-section-label {
  font-size: var(--t-label-sm) !important;
  font-weight: 500 !important;
  letter-spacing: var(--t-track-label);
  text-transform: uppercase;
  color: var(--c-text3) !important;
  margin: 14px 0 6px !important;
  padding: 0 2px;
}

.kb-picker .kp-row-main {
  flex: 1;
  min-width: 0;
}

.kb-picker .kp-row .kp-tt {
  font-size: var(--t-body-sm) !important;
  color: var(--c-text1) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-picker .kp-row .kp-mt {
  font-size: var(--t-caption) !important;
  color: var(--c-text3) !important;
}

.kb-picker .kp-row.on .kp-check {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}

/* =============================================================================
 * 创作抽屉 / 历史
 * ============================================================================= */
.create-drawer .cd-head-title {
  font-family: var(--font-display) !important;
  font-size: var(--t-subtitle) !important;
  font-weight: 600 !important;
  letter-spacing: var(--t-track-tight) !important;
}

.create-drawer .cd-head-sub {
  font-size: var(--t-caption) !important;
  color: var(--c-text3) !important;
}

.create-drawer .cd-item-card {
  border-radius: 16px !important;
  background: var(--c-card) !important;
  border: var(--glass-ring) !important;
}

.create-drawer .cd-item-card.on {
  border-color: rgba(201, 169, 110, 0.45) !important;
  background: var(--c-primary-bg) !important;
  box-shadow: inset 3px 0 0 var(--c-primary) !important;
}

.create-drawer .cd-item-top .cd-title {
  font-size: var(--t-body-sm) !important;
  font-weight: 600 !important;
}

.create-drawer .cd-item-top .cd-meta {
  font-size: var(--t-caption) !important;
  color: var(--c-text3) !important;
}

.create-drawer .cd-item-main {
  flex: 1;
  min-width: 0;
}

.create-drawer .cd-item-body {
  padding: 0 12px 12px !important;
}

.create-drawer .cd-meta-sm {
  font-size: var(--t-caption) !important;
  color: var(--c-text3) !important;
  font-weight: 500 !important;
}

.create-drawer .cd-form-label {
  display: block;
  font-size: var(--t-label) !important;
  font-weight: 500 !important;
  letter-spacing: var(--t-track-label);
  color: var(--c-text2) !important;
  margin-top: 12px !important;
  margin-bottom: 6px !important;
}

.create-drawer .cd-form-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: var(--t-body-sm) !important;
  margin-top: 0 !important;
  border: var(--glass-ring) !important;
  background: var(--c-input-bg) !important;
  color: var(--c-text1) !important;
  line-height: 1.45 !important;
  white-space: pre-wrap;
  word-break: break-word;
}

.create-drawer input.cd-form-input,
.create-drawer textarea.cd-form-input[data-cd-edit-title] {
  min-height: 44px !important;
}

.create-drawer textarea.cd-form-input {
  min-height: 88px !important;
  max-height: min(32vh, 320px);
  overflow-y: auto !important;
  resize: none;
}

.create-drawer .cd-drawer-panel--settings .cd-segs {
  padding-bottom: 4px;
}

.create-drawer .cd-form-input:focus {
  outline: none;
  border-color: rgba(201, 169, 110, 0.55) !important;
}

.create-drawer .cd-form-actions {
  margin-top: 12px !important;
}

.create-drawer .cd-save-btn {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: var(--t-label-sm) !important;
  font-weight: 500 !important;
  border: var(--glass-ring) !important;
  background: var(--c-card2) !important;
  color: var(--c-text2) !important;
}

.create-drawer .cd-drawer-toggle {
  font-size: var(--t-caption) !important;
  border-radius: 10px !important;
  min-height: 34px !important;
}

.create-drawer .cd-drawer-toggle.on {
  background: var(--c-primary-bg) !important;
  color: var(--c-primary-text) !important;
  border-color: rgba(201, 169, 110, 0.35) !important;
}

.create-drawer .cd-drawer-toggle--segs.on {
  background: rgba(139, 157, 195, 0.14) !important;
  color: var(--c-sky) !important;
  border-color: rgba(139, 157, 195, 0.28) !important;
}

.create-drawer .cd-seg {
  font-size: var(--t-caption) !important;
  border-radius: 10px !important;
}

.create-drawer .cd-seg kbd {
  background: var(--c-primary-bg) !important;
  color: var(--c-primary-text) !important;
}

body.native-app .create-drawer.open .cd-list {
  padding-bottom: 10px !important;
}

.create-kb-ref-card {
  border-radius: 16px !important;
  padding: 14px 16px !important;
  border: var(--glass-ring) !important;
  background: var(--c-card) !important;
}

.create-kb-ref-title {
  font-size: var(--t-body-sm) !important;
  font-weight: 600 !important;
}

.create-kb-ref-sub {
  font-size: var(--t-caption) !important;
  line-height: var(--t-leading-loose) !important;
  color: var(--c-text3) !important;
}

/* 首页对话历史抽屉 */
.hd-item.on {
  background: var(--c-primary-bg) !important;
  border-color: rgba(201, 169, 110, 0.35) !important;
}

/* =============================================================================
 * 创作顶栏 · 圆形按钮（APK 无 Tailwind shrink-0，需语义化尺寸）
 * ============================================================================= */
.create-topbar-leading .iconbtn {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text2);
  background: rgba(255, 255, 255, 0.07);
  -webkit-tap-highlight-color: transparent;
}

.create-topbar-leading .iconbtn:active {
  background: var(--c-primary-bg) !important;
  color: var(--c-primary-text) !important;
}

.create-topbar-leading .iconbtn .ic,
.create-topbar-leading .iconbtn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  display: block;
  pointer-events: none;
}

body.theme-light .create-topbar-leading .iconbtn {
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
}

.create-topbar-spacer {
  flex-shrink: 0;
  height: 40px;
}

/* 手工创作 · 键盘弹起时锁定页面滚动，避免顶栏工具被滚走 */
body.create-handwrite-pane .page[data-page="create"].active {
  overflow: hidden !important;
}

body.create-handwrite-pane.keyboard-open .hw-root {
  overflow: hidden;
}

/* ---- 创作工作台 / 智能体对话：统一页边距 ---- */
body.create-workbench-pane .create-workbench {
  padding: 0 var(--t-page-x-right) 10px var(--t-page-x) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body.create-workbench-pane .create-main-panel--wb {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body.create-workbench-pane .create-wb-toolbar {
  padding: 6px 2px 10px !important;
  flex-shrink: 0;
}

body.create-workbench-pane .page[data-page="create"].active > .create-page-body > #createModule,
body.create-workbench-pane .create-workbench,
body.create-workbench-pane .create-main-panel--wb,
body.create-workbench-pane .create-result-col,
body.create-workbench-pane .create-result-col--wb {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

body.create-workbench-pane .create-result-col,
body.create-workbench-pane .create-result-col--wb {
  min-width: 0;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body.create-workbench-pane .create-wb-toolbar {
  touch-action: manipulation;
}

/* 创作工作台：键盘 inset 由 #createKeyboardSpacer 承担；thread 仅 scroll-padding */
body.create-workbench-pane .create-result-col .chat-thread,
body.create-workbench-pane #createResultThread {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 10px 12px 14px !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  overscroll-behavior: contain;
  overflow-anchor: none;
  isolation: auto;
  contain: none;
  -webkit-overflow-scrolling: auto;
  touch-action: pan-y;
  scroll-padding-bottom: calc(12px + var(--create-kb-spacer-h, 0px));
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  /* 全端 baseline（§13.6-B）：不仅依赖 body.create-safe-mode */
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
  filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

body.create-workbench-pane #createResultThread .chat-row,
body.create-workbench-pane #createResultThread .chat-bubble-stack,
body.create-workbench-pane #createResultThread .chat-bubble {
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
  contain: none !important;
  isolation: auto !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.create-keyboard-spacer,
#createKeyboardSpacer {
  flex: 0 0 auto;
  width: 100%;
  height: var(--create-kb-spacer-h, 0px);
  pointer-events: none;
}

body.create-safe-mode #createResultThread *,
body.create-safe-mode #createResultThread,
body.device-degrade-create-anim #createResultThread .chat-bubble,
body.device-degrade-create-anim #createResultThread .chat-row,
body.device-degrade-create-anim #createResultThread .chat-row.assistant .chat-bubble {
  animation: none !important;
  transition: none !important;
}

body.create-safe-mode #createResultThread,
body.create-safe-mode #createResultThread .chat-row,
body.create-safe-mode #createResultThread .chat-bubble-stack,
body.create-safe-mode #createResultThread .chat-bubble {
  isolation: auto !important;
  will-change: auto !important;
  -webkit-overflow-scrolling: auto !important;
  filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  contain: none !important;
}

body.create-workbench-pane .create-result-col .chat-row,
body.create-workbench-pane .create-result-col .chat-bubble-stack,
body.create-workbench-pane .create-result-col .chat-row .chat-bubble {
  transform: none !important;
  will-change: auto;
  contain: none;
  isolation: auto;
  filter: none !important;
  mix-blend-mode: normal;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  flex-shrink: 0;
}

body.create-workbench-pane .create-result-col .chat-row,
body.create-workbench-pane .create-result-col .chat-bubble-stack {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.create-workbench-pane .create-result-col .chat-reasoning {
  width: 100%;
  max-height: none;
  overflow: visible;
}

body.create-workbench-pane .create-result-col .chat-reasoning:not([open]) .chat-reasoning-pre {
  display: none;
}

body.create-workbench-pane .create-result-col .chat-reasoning[open] .chat-reasoning-pre {
  max-height: min(36vh, 280px);
  overflow-y: auto;
}

body.create-workbench-pane .create-result-col .chat-row .chat-bubble {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  width: 100%;
  max-width: 100%;
  max-height: none !important;
  box-sizing: border-box;
}

body.theme-light.create-workbench-pane .create-result-col .chat-row .chat-bubble {
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* HOME-USER-BUBBLE-LOCK · 与 home-layout-v2 同步；用户/助手同宽同边距 */
.page[data-page="home"] .chat-row.user .chat-bubble {
  max-width: 100% !important;
  width: 100% !important;
}

.page[data-page="home"] .chat-row.user .chat-bubble-stack {
  max-width: 100% !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.page[data-page="home"] .chat-row.user .chat-bubble {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}