/*
 * image-chat-home.css
 * 公开根首页的【游客态外壳】皮肤。
 *
 * 2026-09-11 首页改版 v4.1 重写：正文（.ic-home：hero / composer / 常用 / 四页签 / 三句话 / 页脚）
 * 游客与登录后共用同一套布局，样式统一归 home-menu.css。本文件只负责游客态特有的三件事：
 *   ① 公开站顶栏 header.ic-public-nav + 跳过链接（登录态不渲染）；
 *   ② 把工作台外壳（侧栏 / 顶栏 / 会话栏 / 聊天态 / 错误条）藏掉，让正文占满整页；
 *   ③ 游客态白底 + composer 里登录后才有意义的档位入口收起 + 「最近」「更多工作流」不显示。
 * 登录后的图片工作室继续使用 image-chat.html 原有深色主题。
 */

.ic-public-nav,
.ic-skip-link {
  display: none;
}

body[data-guest="1"] {
  color: #111827;
  background: #ffffff;
  grid-template-columns: minmax(0, 1fr) !important;
  /* body 是 grid，游客态只剩「顶栏 / 正文」两行。默认 align-content:stretch 会把
     「视口比页面高」时的富余空间平摊给这两行 —— 结果是顶栏和标题之间撑出一大片空白。
     顶到头即可，页面比视口短时下面留白就留白。 */
  align-content: start;
  overflow-x: hidden;
}

body[data-guest="1"] .ic-skip-link {
  display: block;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  background: #5b5cf0;
  transform: translateY(-160%);
  transition: transform .18s ease;
}

body[data-guest="1"] .ic-skip-link:focus {
  transform: translateY(0);
}

/* ---------- ① 公开站顶栏（定稿：60px 高，与正文同 1040 栅格） ---------- */
body[data-guest="1"] .ic-public-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1040px;
  height: 60px;
  margin: 0 auto;
  padding: 0 24px;
  color: #111827;
  background: transparent;
  border-bottom: 0;
}

.ic-public-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #111827;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
}

.ic-public-brand .ic-public-brand-mark {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  box-shadow: none;
}

.ic-public-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.ic-public-links a {
  color: #6b7280;
  font-size: 14px;
  font-weight: 400;
  transition: color .18s ease;
}

.ic-public-links a:hover,
.ic-public-links a.active {
  color: #111827;
}

.ic-public-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}

.ic-public-login {
  color: #6b7280;
}

.ic-public-login:hover {
  color: #111827;
}

.ic-public-actions .ic-public-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  color: #fff;
  background: #111827;
  font-weight: 500;
}

.ic-public-actions .ic-public-cta:hover {
  background: #000;
}

@media (max-width: 860px) {
  body[data-guest="1"] .ic-public-nav { gap: 12px; padding: 0 16px; }
  .ic-public-links { display: none; }
}

/* ---------- ② 藏掉工作台外壳 ---------- */
body[data-guest="1"] > aside.sidebar,
body[data-guest="1"] .topbar,
body[data-guest="1"] .ic-sessions,
body[data-guest="1"] .ic-side-pin,
body[data-guest="1"] .ic-chat-shell,
body[data-guest="1"] .ic-my-styles {
  display: none !important;
}

/* 访客态不写「请先登录」红字 —— 让按钮自己说话。
   例外：#icStartError 保留可见 —— 访客现在能上传商品图（草稿跨登录带走），
   "图片超过 4MB / 读图失败" 这类原因必须能看到，否则点了没反应无从判断。 */
body[data-guest="1"] #icGlobalError {
  display: none !important;
}

body[data-guest="1"] > .main,
body[data-guest="1"] .content,
body[data-guest="1"] .ic-shell,
body[data-guest="1"] .ic-main {
  width: 100%;
  min-width: 0;
}

body[data-guest="1"] .content {
  padding: 0;
}

body[data-guest="1"] .ic-shell {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* 正文在游客态与页面同底色，不要面板描边（登录态的白面板见 home-menu.css） */
body[data-guest="1"] .ic-home {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- ③ 游客态的 composer 与两块登录后才有的区块 ---------- */
/* 首页只展示 上传商品图 / 平台 / 语言；比例、模型档位、风格参考进工作室后再展开。 */
body[data-guest="1"] #icComposer [data-pick="aspect"],
body[data-guest="1"] #icComposer [data-pick="imageModel"],
body[data-guest="1"] #icComposer #icStyleRefBtn,
body[data-guest="1"] #icComposer #icStyleMode,
body[data-guest="1"] #icComposer .wf-pill {
  display: none !important;
}

/* 「最近」是登录后的会话列表；「更多工作流」含规划中卡片，都不给访客看 */
body[data-guest="1"] #icHomeRecent,
body[data-guest="1"] #icHomeWfMore {
  display: none !important;
}

body[data-guest="1"] :is(a, button, textarea, input, summary):focus-visible {
  outline: 2px solid #5b5cf0;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body[data-guest="1"] * {
    animation: none !important;
    transition: none !important;
  }
}