/* ==========================================================================
 * AI 助手页 —— 样式（#view-ai）
 * --------------------------------------------------------------------------
 * 本文件只负责 #view-ai 这一页：
 *   ① 页面与容器（整页布局）
 *   ② 头部（智图万象 AI 助手 / 在线 / 新对话）
 *   ③ AI 首页·搜索态（.ai-search / .ai-logo / .ai-searchbox）
 *   ④ 聊天态（.ai-msgs / .ai-body / .ai-inbar）
 *   ⑤ 功能推荐卡片（.ai-cards / .ai-card）
 *   ⑥ 热门功能标签（.ai-hot / .ai-quick / .ai-chip）
 *   ⑦ 窄屏适配
 *
 * 【页面划分】现在两个 AI 入口各自独立、互不混排：
 *   #view-ai          AI 助手本体          ← 导航「AI智能咨询」进入
 *   #view-ai-consult  学科服务看板          ← 首页「开启智能服务」进入
 * 因此本文件不再需要「嵌入模式」那套覆盖规则：.ai-page 又是整页容器了。
 * 学科服务看板用的是 .xk-* 类名，样式在 css/style.css，本文件从不涉及。
 *
 * 【重命名历史】2026-09-23：
 *   原「AI 智能服务中心」独立页 #view-ai-router → 一度被内嵌进 #view-ai-consult
 *   的顶部模块 → 现按需求恢复为独立页并更名 #view-ai。
 *   期间选择器前缀经历了 router → ai-consult → ai 两次改动，改错一次就会整页失样式，
 *   所以 tests/ia-nav.selftest.js 里有一条断言专门守这个前缀。
 * ========================================================================== */

/* 页面背景：与看板页区分开，AI 助手页用一层很淡的蓝白渐变 */
#view-ai{background:linear-gradient(180deg,#f6f9ff 0%,#eef4fd 100%)}

/* 保险：模块内带 hidden 的元素一律不显示
   （避免 .ai-page 的 display:flex 覆盖浏览器对 [hidden] 的默认行为） */
#view-ai .ai-page [hidden]{display:none !important}

/* ==========================================================================
 * ① 页面容器：居中、限高、底部输入固定
 * ========================================================================== */
#view-ai .ai-page{
  width:min(1080px,94vw);margin:18px auto 0;
  height:calc(100vh - 96px);
  display:flex;flex-direction:column;min-height:0;
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(43,89,214,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,251,255,.98));
  box-shadow:0 2px 8px rgba(23,58,130,.06), 0 24px 60px rgba(23,58,130,.1);
}

/* ==========================================================================
 * ② 头部：助手身份 + 描述
 * ========================================================================== */
#view-ai .ai-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid rgba(43,89,214,.1);
  background:linear-gradient(180deg,#ffffff,rgba(246,250,255,.9));
}
#view-ai .ai-head-l{display:flex;align-items:center;gap:12px;min-width:0}
#view-ai .ai-head-tx{min-width:0}
#view-ai .ai-head-tx b{
  display:flex;align-items:center;gap:9px;
  font-size:17px;font-weight:800;color:#0b2a66;letter-spacing:.2px;
}
#view-ai .ai-online{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:600;
  color:#0b6b45;background:rgba(18,168,106,.1);border:1px solid rgba(18,168,106,.3);
}
#view-ai .ai-online i{width:6px;height:6px;border-radius:50%;background:#12a86a;display:block}
#view-ai .ai-head-tx small{
  display:block;margin-top:5px;font-size:12.5px;line-height:1.7;color:#5a6f95;max-width:74ch;
}
#view-ai .ai-clear{flex:0 0 auto;height:32px;padding:0 13px;border-radius:10px;font-size:12.5px}

/* ==========================================================================
 * ③ AI 首页 · 搜索态（Google / ChatGPT 首页风格）
 *    中央 Logo + 标题 + 大搜索框（宽 600–700 / 高 55）+ 热门功能；
 *    此状态下不含任何聊天元素（.ai-msgs 与 .ai-inbar 都是 hidden）。
 * ========================================================================== */
#view-ai .ai-search{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 20px 40px;gap:14px;
}
#view-ai .ai-search[hidden]{display:none}

/* 中央大 Logo：深蓝色圆形 + 白色「AI」文字（纯 CSS，无图片无插画；
   需要换成正式 Logo 时，把 background 改成 url(...) 即可） */
#view-ai .ai-logo{
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#1f4fbf,#0b2a66);
  box-shadow:0 6px 18px rgba(11,42,102,.28);
  margin-bottom:2px;
}
#view-ai .ai-logo span{
  font-size:20px;font-weight:800;letter-spacing:.5px;color:#fff;line-height:1;
  font-family:inherit;
}
#view-ai .ai-logo svg{position:relative;z-index:1}
#view-ai .ai-search .ai-logo{margin-bottom:4px}
#view-ai .ai-logo-t{
  margin:0;font-size:24px;font-weight:800;letter-spacing:.3px;color:#0b2a66;
}

/* 大搜索框：白底 + 圆角 + 阴影 + 居中，宽 600–700，高 55 */
#view-ai .ai-searchbox{
  position:relative;display:flex;align-items:center;gap:10px;
  width:min(700px,92%);height:55px;
  padding:0 8px 0 18px;margin-top:6px;
  border-radius:999px;
  border:1px solid rgba(43,89,214,.16);
  background:#fff;
  box-shadow:0 2px 6px rgba(23,58,130,.06), 0 14px 36px rgba(23,58,130,.1);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
#view-ai .ai-searchbox:hover{
  border-color:rgba(47,123,255,.4);
  box-shadow:0 4px 10px rgba(23,58,130,.08), 0 18px 44px rgba(31,86,214,.16);
}
#view-ai .ai-searchbox:focus-within{
  border-color:rgba(47,123,255,.6);
  box-shadow:0 0 0 4px rgba(47,123,255,.14), 0 18px 44px rgba(31,86,214,.18);
}
#view-ai .ai-search-ic{flex:0 0 auto;display:grid;place-items:center;color:#8296b8}
#view-ai .ai-searchbox:focus-within .ai-search-ic{color:#1a49c8}
#view-ai .ai-searchbox input{
  flex:1 1 auto;min-width:0;height:100%;
  border:none;outline:none;background:transparent;
  font-family:inherit;font-size:14.5px;color:#12306a;
}
#view-ai .ai-searchbox input::placeholder{color:#a3b2cc}
#view-ai .ai-search-go{
  flex:0 0 auto;height:41px;padding:0 22px;border-radius:999px;cursor:pointer;border:none;
  font-family:inherit;font-size:13.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#2f7bff,#1a49c8);
  box-shadow:0 6px 16px rgba(31,86,214,.26);
  transition:filter .18s,transform .18s,box-shadow .18s;
}
#view-ai .ai-search-go:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 10px 22px rgba(31,86,214,.32)}

/* ==========================================================================
 * ④ 聊天态（发送第一条消息后显示）
 * ========================================================================== */
#view-ai .ai-msgs{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:20px;display:flex;flex-direction:column;gap:16px;
  scroll-behavior:smooth;
}
#view-ai .ai-msg{display:flex;gap:11px;align-items:flex-start;max-width:100%}
#view-ai .ai-msg.me{flex-direction:row-reverse}
#view-ai .ai-face{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(47,123,255,.14),rgba(47,123,255,.04));
  border:1px solid rgba(47,123,255,.2);
}
#view-ai .ai-face .robot-img{width:28px;height:28px}
#view-ai .ai-me{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#2f7bff,#1a49c8);
  box-shadow:0 6px 14px rgba(31,86,214,.24);
}
#view-ai .ai-body{
  min-width:0;max-width:min(760px,78%);
  padding:13px 16px;border-radius:14px;
  border:1px solid rgba(43,89,214,.13);
  background:#fff;color:#12306a;font-size:13.5px;line-height:1.9;
  box-shadow:0 1px 3px rgba(23,58,130,.05);
}
#view-ai .ai-msg.me .ai-body{
  background:linear-gradient(135deg,#2f7bff,#1a49c8);
  border-color:transparent;color:#fff;
  box-shadow:0 8px 20px rgba(31,86,214,.24);
}
#view-ai .ai-body p{margin:0 0 8px}
#view-ai .ai-body p:last-child{margin-bottom:0}
#view-ai .ai-dim{color:#8296b8;font-size:12.5px}
#view-ai .ai-ul{margin:6px 0 8px;padding-left:18px;line-height:2}
#view-ai .ai-ul b{color:#1a49c8}
#view-ai .ai-src{
  display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:8px;
  font-size:11px;font-weight:600;color:#1a49c8;
  background:rgba(47,123,255,.09);border:1px solid rgba(47,123,255,.22);
}
#view-ai .ai-ans{
  padding:11px 13px;border-radius:11px;
  background:rgba(247,251,255,.9);border:1px solid rgba(43,89,214,.1);
}
#view-ai .ai-rel{
  margin:12px 0 8px;font-size:11px;font-weight:700;color:#8296b8;letter-spacing:.5px;
}

/* 底部输入区：仅聊天态显示（搜索态用中央搜索框） */
#view-ai .ai-inbar{
  flex:0 0 auto;display:flex;align-items:flex-end;gap:10px;
  margin:0 20px;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(43,89,214,.16);background:#fff;
  box-shadow:0 1px 2px rgba(23,58,130,.04), 0 8px 22px rgba(23,58,130,.06);
  transition:border-color .18s,box-shadow .18s;
}
#view-ai .ai-inbar:focus-within{
  border-color:rgba(47,123,255,.5);
  box-shadow:0 0 0 3px rgba(47,123,255,.12), 0 8px 22px rgba(23,58,130,.07);
}
#view-ai .ai-inbar textarea{
  flex:1 1 auto;min-width:0;max-height:132px;min-height:26px;
  border:none;outline:none;resize:none;background:transparent;
  font-family:inherit;font-size:13.5px;line-height:1.8;color:#12306a;
}
#view-ai .ai-inbar textarea::placeholder{color:#a3b2cc}
#view-ai .ai-send{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;cursor:pointer;border:none;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#2f7bff,#1a49c8);
  box-shadow:0 6px 16px rgba(31,86,214,.26);
  transition:filter .18s,transform .18s;
}
#view-ai .ai-send:hover{filter:brightness(1.07);transform:translateY(-1px)}
#view-ai .ai-foot{
  flex:0 0 auto;padding:9px 20px 14px;text-align:center;
  font-size:11px;color:#a3b2cc;
}

/* ==========================================================================
 * ⑤ 功能推荐卡片（意图路由命中后给出的一键跳转卡片）
 * ========================================================================== */
#view-ai .ai-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
#view-ai .ai-cards-sm .ai-card{padding:11px 12px}
#view-ai .ai-card{
  display:flex;flex-direction:column;gap:9px;
  padding:13px 14px;border-radius:13px;
  border:1px solid rgba(43,89,214,.14);
  background:linear-gradient(180deg,#fff,rgba(247,251,255,.9));
  box-shadow:0 1px 3px rgba(23,58,130,.06);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
#view-ai .ai-card:hover{border-color:rgba(47,123,255,.45);box-shadow:0 12px 28px rgba(31,86,214,.16);transform:translateY(-2px)}
#view-ai .ai-card-hd{display:flex;align-items:center;gap:9px}
#view-ai .ai-card-ic{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:16px;
  background:linear-gradient(135deg,rgba(47,123,255,.16),rgba(47,123,255,.05));
  border:1px solid rgba(47,123,255,.2);
}
#view-ai .ai-card-hd b{font-size:13.5px;color:#0b2a66}
#view-ai .ai-card-desc{font-size:11.5px;line-height:1.7;color:#8296b8}
#view-ai .ai-card-btn{
  height:34px;padding:0 14px;border-radius:10px;font-size:12.5px;font-weight:700;
  border:none;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#2f7bff,#1a49c8);
  box-shadow:0 6px 16px rgba(31,86,214,.24);
  transition:filter .18s,transform .18s,box-shadow .18s;
}
#view-ai .ai-card-btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 10px 22px rgba(31,86,214,.3)}

/* ==========================================================================
 * ⑥ 热门功能标签
 *    结构：.ai-hot（"热门功能" 文字 + 标签行）
 *    标签由 app.js 的 QUICK_AI 渲染；点下去的咨询语句由 data-q 提供
 *    （显示名与实际发出的语句分开，否则功能名丢给意图识别命中率很低）
 * ========================================================================== */
#view-ai .ai-hot{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  max-width:840px;margin-top:6px;
}
#view-ai .ai-hot-t{
  flex:0 0 auto;font-size:12px;font-weight:700;color:#8296b8;letter-spacing:.4px;
}
#view-ai .ai-quick{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
#view-ai .ai-chip{
  height:30px;padding:0 12px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(43,89,214,.16);background:#fff;color:#31527f;
  font-family:inherit;font-size:12px;font-weight:600;
  transition:border-color .16s,background .16s,color .16s,transform .16s,box-shadow .16s;
}
#view-ai .ai-chip:hover{
  border-color:rgba(47,123,255,.45);color:#1a49c8;background:#f7fbff;
  transform:translateY(-1px);box-shadow:0 6px 14px rgba(31,86,214,.12);
}

/* ==========================================================================
 * ⑦ 窄屏适配
 * ========================================================================== */
@media (max-width:760px){
  #view-ai .ai-page{width:96vw;height:calc(100vh - 76px);margin-top:10px;border-radius:16px}
  #view-ai .ai-body{max-width:86%}
  #view-ai .ai-head{padding:12px 14px}
  #view-ai .ai-msgs{padding:14px}
  #view-ai .ai-inbar{margin:0 14px}
  #view-ai .ai-cards{grid-template-columns:1fr}
  #view-ai .ai-searchbox{width:94%;height:50px;padding-left:14px}
  #view-ai .ai-search-go{height:38px;padding:0 16px}
  /* Logo 保持 60px（与桌面一致，即需求指定的尺寸）。
     旧文件这里写的是 88px —— 那是更早「约 100px 圆形」时期的残留，
     比桌面还大，属于历史遗留；这里不再放大，也不另造新尺寸。 */
  #view-ai .ai-logo-t{font-size:19px}
  #view-ai .ai-hot{justify-content:flex-start}
  #view-ai .ai-quick{justify-content:flex-start}
}