/* ========================================
   Incognito Mode — 临时聊天模式
   ======================================== */

/* Sidebar 直接隐藏（无过渡动画） */
.ai-design-section.incognito-mode .chat-sidebar {
  width: 0 !important;
  min-width: 0;
  overflow: hidden;
  border-right: none;
  padding: 0;
  transition: none;
  display: none;
}

/* 原始 header 隐藏 */
.ai-design-section.incognito-mode .chat-header {
  display: none;
}

@keyframes incognitoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 外围背景：白天深黑，黑夜白色 */
.ai-design-section.incognito-mode {
  background: #000;
  animation: incognitoFadeIn 0.4s ease-out;
}
.ai-design-section.dark-mode.incognito-mode,
.dark-mode-active .ai-design-section.incognito-mode {
  background: #fff;
}

/* Chat main — 占满全宽，底部和左右留出边距露出外围背景 */
.ai-design-section.incognito-mode .chat-main {
  border: none;
  margin: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  flex: 1 1 100%;
  padding: 0 var(--duo-window-gap) var(--duo-window-gap);   /* 缝隙走全站唯一真源(与 Studio 同一个) */
  box-sizing: border-box;
}

/* 聊天内容区域四角圆角 — 白天白底，黑夜黑底 */
/* padding-top: 0 因为 incognito header 是 flow 布局不是 fixed */
.ai-design-section.incognito-mode .chat-container {
  border-radius: calc(24px * var(--corner-k));
  overflow: hidden;
  background: #fff;
  height: 100%;
  /* the window's bottom gap shortens this box; the same gap on top keeps its centre - and the composer - unmoved */
  padding-top: var(--duo-window-gap);
}

.ai-design-section.dark-mode.incognito-mode .chat-container,
.dark-mode-active .ai-design-section.incognito-mode .chat-container,
.ai-design-section.dark-mode.incognito-mode .chat-messages,
.dark-mode-active .ai-design-section.incognito-mode .chat-messages {
  background: #000;
}

/* Incognito header bar — 与 .chat-header 完全对齐，无圆角 */
/* 用负 margin 抵消 .chat-main 的 padding，让 header 占满全宽 */
/* 白天：黑底白字，黑夜：白底黑字 */
/* 无 border-bottom（与 padding-top:8px 配对精确补偿居中偏移） */
.incognito-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 16px;
  /* 负 margin 抵消无痕态下 .chat-main 的左右缝，让本条占满窗口全宽。
     ★2026-07-27 修（用户："关闭 hover 比无痕图标偏右" → 改后又"顶到左边"）：
     原写死 -8px，而要抵消的缝 --duo-window-gap 是 4px —— 多撑了 4px，
     于是 × 的右界落在 窗口右 −12px，而 .chat-header 里的无痕按钮是 −16px，两者差 4px。
     根治=跟缝走同一个 token（同文件 :224 已是此写法），改缝时不可能再分家；
     写死任何数字都只是这次对上、下次那个 token 一改又错位。 */
  margin: 0 calc(-1 * var(--duo-window-gap));
  background: #000;
  color: #fff;
  border-radius: 0;
  flex-shrink: 0;
}

@keyframes incognitoSlideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.incognito-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Flair", "Jost Fallback", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.incognito-header-left.incognito-animate {
  animation: incognitoSlideDown 0.35s ease-out both;
}

.incognito-header-left svg {
  width: var(--icon-size);
  height: var(--icon-size);
  color: #fff;
}

/* 欢迎页 incognito 按钮：默认隐藏，JS 确认欢迎页后才显示（防止页面切换闪现） */
/* ★2026-07-27 用户定：进/出无痕这【一对】按钮做成同一规格 —— 方框 28、图标 16。
   进无痕(本条)原为 .chat-header-btn 的 36 方 / 18 图标，出无痕(.incognito-header-close)
   走 .project-modal-close 的 28 方 / 14 图标 → 切换时方块大小和图标都在跳。
   ★为什么不改 .project-modal-close：它是全站 33 个弹窗关闭按钮的共用基准（设置/改名/
   分享/删除确认/记忆管理…），改它会连带全部变大。故只在无痕这一对上覆盖，共用基准不动。 */
#btnIncognito {
  display: none;
  color: rgba(0,0,0,0.85);
  width: 28px;
  height: 28px;
}
/* No size of its own: the button is a .chat-header-btn and takes that row's size, the same ghost as the
   incognito bar it opens (owner 2026-09-16: the header ghost must be as big as the one inside). */
.dark-mode #btnIncognito {
  color: #e5e5e5;
}

/* 关闭按钮 — hover 尺寸与 #btnIncognito 一致，颜色与 sidebar 图标一致 */
/* 框/图标走单一真源 .project-modal-close(28方/14,DOM 上并列);头部深色底 → 只保留白色 × 覆盖(否则 × 变暗看不见) */
.incognito-header-close {
  color: rgba(255,255,255,0.85);
}
/* 与 #btnIncognito 配成一对：方框沿用 .project-modal-close 的 28，图标从共用的 14 提到 16。
   只覆盖本按钮，不动 .project-modal-close 共用基准（那是全站 33 个弹窗关闭按钮的单一真源）。 */
.incognito-header-close svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }

/* Incognito 欢迎页描述（颜色继承页面默认，与非 incognito 副标题一致） */
.incognito-welcome-desc {
  font-size: 13px;
  margin-top: 8px;
}
/* ── Hover / Active ── */
/* 白天：纯黑背景上 hover 要更亮才看得到 */
html:not([data-input="touch"]) .incognito-header-close:hover{
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.incognito-header-close:active {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* ── Dark Mode ── */

/* 黑夜：外围白色，header 白底黑字，聊天区黑底 */
.ai-design-section.dark-mode.incognito-mode,
.dark-mode-active .ai-design-section.incognito-mode {
  background: #fff !important;
}

.dark-mode .incognito-header-bar,
.dark-mode-active .incognito-header-bar {
  background: #fff;
  color: #1a1a1a;
}

/* 黑夜：chat-main 不设背景（透明），和白天模式一致 */
/* 父级 .ai-design-section bg:#fff 自然透过作为白色边框 */
.dark-mode .incognito-header-left svg,
.dark-mode-active .incognito-header-left svg {
  color: #1a1a1a;
}
.dark-mode .incognito-header-close,
.dark-mode-active .incognito-header-close {
  color: rgba(0,0,0,0.85);
}
html:not([data-input="touch"]) .dark-mode .incognito-header-close:hover,
html:not([data-input="touch"]).dark-mode-active .incognito-header-close:hover{
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.85);
}

.dark-mode .incognito-header-close:active,
.dark-mode-active .incognito-header-close:active {
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.85);
}

/* 黑夜 incognito：composer bar 匹配聊天区黑底 */
.ai-design-section.dark-mode.incognito-mode .chat-container .composer-bar,
.dark-mode-active .ai-design-section.incognito-mode .chat-container .composer-bar {
  background-color: #000;
  border-top-color: #000;
}

/* 黑夜 incognito：欢迎标题也要白色（聊天区是 #000） */
.ai-design-section.dark-mode.incognito-mode #initial-message,
.dark-mode-active .ai-design-section.incognito-mode #initial-message {
  color: #e5e5e5;
}

/* ── Mobile ── */

@media (max-width: 768px), (max-height: 500px) {
  /* 手机端:左右留缝,【下边不留】→ 窗口直抵屏幕底(配合下方"下圆角去掉") */
  .ai-design-section.incognito-mode .chat-main {
    padding: 0 var(--duo-window-gap) 0;
    overflow: hidden;
  }
  .ai-design-section.incognito-mode .chat-container {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .incognito-header-bar {
    margin: 0 calc(-1 * var(--duo-window-gap));   /* 抵消 chat-main 的左右缝(跟 token 走) */
    padding-left: 20px;
  }
  /* 手机端只保留上圆角:窗口下沿直抵屏幕底,不留下边缘与下圆角 */
  .ai-design-section.incognito-mode .chat-container {
    border-radius: calc(20px * var(--corner-k)) calc(20px * var(--corner-k)) 0 0;
    overflow: visible;
    background: #fff;
  }
  .ai-design-section.dark-mode.incognito-mode .chat-container,
  .ai-design-section.dark-mode.incognito-mode .chat-messages {
    background: #000;
  }
  .ai-design-section.incognito-mode .chat-messages {
    border-radius: calc(20px * var(--corner-k)) calc(20px * var(--corner-k)) 0 0;
    overflow-y: auto;
  }
  .ai-design-section.incognito-mode #initial-message {
    border-radius: calc(20px * var(--corner-k)) calc(20px * var(--corner-k)) 0 0;
    overflow: hidden;
  }
  /* composer 负 margin 撑回原宽（不加额外 padding，保持 pill 宽度与欢迎页一致） */
  /* 背景强制透明：防止暗色模式 #212121 通过负 margin 延伸遮挡边框 */
  .ai-design-section.incognito-mode .chat-container:not(.has-messages) .composer-bar {
    margin-left: calc(-1 * var(--duo-window-gap));
    margin-right: calc(-1 * var(--duo-window-gap));
    background: transparent;
    border-top-color: transparent;
  }
  /* incognito 有消息时：fixed composer 留 8px 边距 + 透明背景（不遮边框） */
  .ai-design-section.incognito-mode .chat-container.has-messages .composer-bar {
    left: 8px;
    right: 8px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    background-clip: border-box;
  }
  /* 隐藏汉堡菜单 */
  .ai-design-section.incognito-mode .mobile-menu-trigger {
    display: none !important;
  }
}