/* ============================================================
   全球美业专家顾问 · PC 浏览器版
   定位：把 H5/小程序里的 AI 顾问搬到桌面端，用上 PC 的宽度与鼠标交互。
   与手机版的差异（都是有意做的）：
     ① 两栏：左栏常驻「顾问身份 / 额度 / 热门问题 / 本次会话」，右栏是对话区
     ② 对话区固定高度内部滚动，输入框常驻底部 —— 桌面 IM 的标准形态，不用滚到底才能打字
     ③ 「深度学习推荐」在 PC 上横排 2 张（手机竖排）
     ④ 引用角标 [n] 点开是浮层卡片，不挤占正文
   ============================================================ */

.ai-main {
  display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 18px;
  padding: 18px 0 30px; align-items: start;
  /* 整页不滚动：对话区自己滚（高度 = 视口 - 顶栏 - 分类带 - 上下留白） */
  height: calc(100vh - var(--top-h) - var(--sub-h) - 48px);
}
.ai-main > * { min-width: 0; }

/* ---------------- 左栏 ---------------- */
.ai-side { display: flex; flex-direction: column; gap: 14px; height: 100%; overflow-y: auto; padding-right: 2px; }

.ai-brand {
  border: 1px solid rgba(0, 212, 255, .28); border-radius: var(--r);
  background: linear-gradient(150deg, rgba(0, 212, 255, .1), rgba(124, 58, 237, .08)), var(--bg-2);
  padding: 18px 16px; text-align: center;
}
.ai-orb {
  width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: #041018;
  background: linear-gradient(135deg, var(--cyan), #7c3aed);
}
.ai-brand-t { font-size: 15px; font-weight: 800; }
.ai-brand-d { margin-top: 6px; font-size: 12px; color: var(--text-2); line-height: 1.7; }
.ai-brand-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ai-brand-tags span {
  font-size: 11px; color: var(--cyan); padding: 2px 8px; border-radius: 9px;
  background: rgba(0, 212, 255, .1); border: 1px solid rgba(0, 212, 255, .25);
}

.ai-card { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); padding: 13px 14px; }
.ai-card-h {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3);
  letter-spacing: .4px; margin-bottom: 10px;
}
.ai-clear { margin-left: auto; font-size: 11px; color: var(--text-3); }
.ai-clear:hover { color: var(--cyan); }

.ai-quota { font-size: 12.5px; color: var(--text-2); line-height: 1.8; }
.ai-quota b { color: var(--cyan); font-weight: 800; font-size: 15px; }
.ai-quota .bar { margin-top: 8px; height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.ai-quota .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #22d3ee); }
.ai-quota-empty { font-size: 12px; color: var(--text-3); }
.ai-quota-note { margin-top: 6px; font-size: 11px; color: var(--text-3); }
/* 会员可选入口：小字链接，不是按钮，不抢注意力（它不是门禁） */
.ai-loginlink {
  display: block; margin-top: 10px; font-size: 11.5px; color: var(--text-3); text-align: left;
  border-bottom: 1px dashed var(--border-2); padding-bottom: 2px;
}
.ai-loginlink:hover { color: var(--cyan); border-color: var(--cyan); }
/* 额度卡里的关注二维码 */
.pw-qr { width: 132px; height: 132px; margin: 14px auto 0; padding: 6px; background: #fff; border-radius: 9px; }
.pw-qr img { width: 100%; height: 100%; object-fit: contain; }

.ai-hots { display: flex; flex-direction: column; gap: 2px; }
.ai-hot {
  text-align: left; font-size: 12.5px; color: var(--text-2); line-height: 1.5;
  padding: 7px 9px; border-radius: 7px; transition: all .15s;
}
.ai-hot:hover { color: var(--cyan); background: var(--panel-2); }

.ai-hist { display: flex; flex-direction: column; gap: 2px; }
.ai-hist-i {
  text-align: left; font-size: 12.5px; color: var(--text-3); padding: 7px 9px; border-radius: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-hist-i:hover { color: var(--text); background: var(--panel-2); }

/* ---------------- 右栏：对话 ---------------- */
.ai-chat {
  display: flex; flex-direction: column; height: 100%; min-height: 420px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); overflow: hidden;
}
.ai-chat-h {
  display: flex; align-items: center; gap: 9px; padding: 13px 18px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ai-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex-shrink: 0; }
.ai-chat-t { font-size: 14px; font-weight: 700; }
.ai-chat-s { margin-left: auto; font-size: 12px; color: var(--text-3); }

.ai-body { flex: 1; overflow-y: auto; padding: 20px 22px; scroll-behavior: smooth; }
.ai-body::-webkit-scrollbar { width: 8px; }
.ai-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

/* 消息 */
.ai-msg { display: flex; margin-bottom: 18px; }
.ai-msg.u { justify-content: flex-end; }
.ai-msg .bubble {
  max-width: 88%; padding: 12px 15px; border-radius: 12px; font-size: 13.5px; line-height: 1.85;
  color: var(--text); word-break: break-word;
}
.ai-msg.u .bubble { background: linear-gradient(135deg, rgba(0, 212, 255, .18), rgba(124, 58, 237, .14)); border: 1px solid rgba(0, 212, 255, .3); }
.ai-msg.a .bubble { background: var(--bg-3); border: 1px solid var(--border); }
.ai-msg .bubble p { margin: 0 0 10px; }
.ai-msg .bubble p:last-child { margin-bottom: 0; }
.ai-msg .bubble strong { color: #fff; font-weight: 800; }

/* 引用角标 */
.cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin: 0 2px; vertical-align: 1px;
  font-size: 10.5px; font-weight: 700; border-radius: 5px; cursor: pointer;
  color: #041018; background: var(--cyan);
}
.cite:hover { box-shadow: 0 0 10px rgba(0, 212, 255, .6); }

/* 引用浮层卡 */
.cite-card {
  margin-top: 12px; border: 1px solid rgba(0, 212, 255, .3); border-radius: 9px;
  background: rgba(0, 212, 255, .05); padding: 11px 13px;
}
.cite-card .cc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.cite-card .cc-type {
  font-size: 11px; padding: 1px 7px; border-radius: 8px; flex-shrink: 0;
  color: var(--violet); background: rgba(124, 58, 237, .15); border: 1px solid rgba(124, 58, 237, .35);
}
.cite-card .cc-type.point { color: var(--amber); background: rgba(245, 158, 11, .13); border-color: rgba(245, 158, 11, .35); }
.cite-card .cc-title { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cite-card .cc-quote { font-size: 12px; color: var(--text-3); line-height: 1.7; margin-bottom: 8px; }
.cite-card .cc-go { font-size: 12.5px; color: var(--cyan); }
.cite-card .cc-go:hover { text-decoration: underline; }

/* 推荐课程（PC 横排 2 张） */
.rec-block { margin-top: 14px; }
.rec-title { font-size: 12px; color: var(--text-3); margin-bottom: 9px; }
.rec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rec-card {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg-2); transition: all .16s; min-width: 0;
}
.rec-card:hover { border-color: rgba(0, 212, 255, .45); background: var(--panel-2); }
.rec-thumb {
  width: 58px; height: 38px; border-radius: 6px; flex-shrink: 0; position: relative;
  background: linear-gradient(135deg, #0f1729, #1a0f2e) center/cover no-repeat;
}
.rec-info { min-width: 0; }
.rec-info .rt { font-size: 12.5px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-info .rm { margin-top: 3px; font-size: 11px; color: var(--text-3); }
.rec-go { margin-left: auto; color: var(--text-3); font-size: 15px; flex-shrink: 0; }

/* 专家卡（知识库没覆盖时） */
.expert-card {
  margin-top: 13px; border: 1px solid rgba(124, 58, 237, .35); border-radius: 10px;
  background: linear-gradient(150deg, rgba(124, 58, 237, .1), transparent), var(--bg-2);
  padding: 14px; display: flex; gap: 16px; align-items: flex-start;
}
.ec-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff;
}
.ec-name { font-size: 14px; font-weight: 800; }
.ec-cert { font-size: 11px; color: var(--green); font-weight: 400; margin-left: 6px; }
.ec-title { margin-top: 3px; font-size: 12px; color: var(--text-2); }
.ec-tags { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.ec-tags span { font-size: 11px; padding: 1px 7px; border-radius: 8px; color: var(--text-2); background: var(--panel-2); }
.ec-right { margin-left: auto; text-align: center; flex-shrink: 0; }
.ec-qr { width: 108px; height: 108px; border-radius: 8px; background: #fff; padding: 4px; }
.ec-qr img { width: 100%; height: 100%; object-fit: contain; }
.ec-hint { margin-top: 6px; font-size: 11px; color: var(--text-3); }

/* 额度用完 */
.paywall {
  margin-top: 6px; text-align: center; padding: 22px 18px;
  border: 1px solid rgba(245, 158, 11, .35); border-radius: 10px;
  background: linear-gradient(150deg, rgba(245, 158, 11, .09), transparent), var(--bg-2);
}
.pw-icon { font-size: 26px; }
.pw-t { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--amber); }
.pw-d { margin-top: 7px; font-size: 12.5px; color: var(--text-2); line-height: 1.85; }
.pw-btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 20px; margin-top: 14px;
  border-radius: 18px; font-size: 13px; font-weight: 700; color: #041018;
  background: linear-gradient(135deg, var(--amber), #fbbf24);
}
.pw-note { margin-top: 10px; font-size: 11.5px; color: var(--text-3); }

/* 欢迎态 */
.ai-welcome { text-align: center; padding: 34px 26px 10px; }
.ai-welcome .w-orb {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; font-size: 26px; color: #041018;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cyan), #7c3aed);
}
.ai-welcome .w-t { font-size: 19px; font-weight: 800; }
.ai-welcome .w-d { margin-top: 9px; font-size: 13px; color: var(--text-2); line-height: 1.9; }
.w-chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.w-chip {
  font-size: 12.5px; color: var(--text-2); padding: 8px 15px; border-radius: 17px;
  border: 1px solid var(--border); background: var(--bg-3); transition: all .16s;
}
.w-chip:hover { color: var(--cyan); border-color: rgba(0, 212, 255, .5); }

/* 门禁（扫码登录 / 关注引导） */
.ai-gate { text-align: center; padding: 28px 22px; }
.ai-gate .g-icon {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; font-size: 22px; color: #041018;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cyan), #7c3aed);
}
.ai-gate .g-t { font-size: 17px; font-weight: 800; }
.ai-gate .g-d { margin-top: 9px; font-size: 13px; color: var(--text-2); line-height: 1.9; }
.ai-gate .g-d b { color: var(--cyan); }
.ai-qr {
  width: 176px; height: 176px; margin: 18px auto 0; padding: 7px; background: #fff; border-radius: 10px;
}
.ai-qr img { width: 100%; height: 100%; object-fit: contain; }
.ai-qr-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #6a7893; font-size: 12px; }
.ai-gate .g-status { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.ai-gate .g-status.on { color: var(--green); }
.ai-gate .g-hint { margin-top: 8px; font-size: 12px; color: var(--text-3); line-height: 1.8; }
.ai-gate .g-btn {
  display: inline-flex; align-items: center; height: 34px; padding: 0 18px; margin-top: 14px;
  border-radius: 17px; font-size: 12.5px; font-weight: 700; color: #041018;
  background: linear-gradient(135deg, var(--cyan), #22d3ee);
}

/* 打字中 */
.ai-typing { display: flex; gap: 4px; align-items: center; height: 18px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: ai-blink 1.2s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .2s; }
.ai-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ai-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.ai-quota-hint { margin-top: 12px; font-size: 11.5px; color: var(--text-3); }
.ai-quota-hint b { color: var(--cyan); }
.ai-quota-hint a { color: var(--text-2); border-bottom: 1px dashed var(--border-2); }

.ai-err { color: var(--red); }

/* ---------------- 输入区 ---------------- */
.ai-inputbar {
  display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--bg-2); flex-shrink: 0;
}
.ai-input {
  flex: 1; min-width: 0; resize: none; max-height: 132px; min-height: 40px;
  padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text); outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.ai-input:focus { border-color: rgba(0, 212, 255, .55); box-shadow: 0 0 0 3px rgba(0, 212, 255, .09); }
.ai-input::placeholder { color: var(--text-3); }
.ai-send {
  width: 46px; height: 40px; border-radius: 12px; flex-shrink: 0; color: #041018;
  background: linear-gradient(135deg, var(--cyan), #22d3ee);
  display: flex; align-items: center; justify-content: center; transition: all .18s;
}
.ai-send:hover { box-shadow: 0 0 18px rgba(0, 212, 255, .5); }
.ai-send[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ai-note { padding: 0 16px 11px; font-size: 11.5px; color: var(--text-3); line-height: 1.7; flex-shrink: 0; }

/* 窄屏兜底：1240px 以下左栏收窄 */
@media (max-width: 1320px) {
  .ai-main { grid-template-columns: 226px minmax(0, 1fr); }
}