/* AI 学习空间组件样式（三站同一份）。
   规则一律用 blai- 前缀：站内已经有 .card/.badge/.grid/.toast/.muted 等同名类，
   撞名会把整站的卡片和提示条一起改掉。抽屉外壳直接复用站内 .demo-ov/.demo-card，不在这里重定义。 */

.blai-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.blai-head h3 { margin:0; }
.blai-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.blai-badge-box { display:inline-flex; gap:6px; }
.blai-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#eef2ff; color:var(--brand); }
.blai-badge-ok { background:var(--ok-bg); color:#14532d; }
.blai-badge-warn { background:var(--warn-bg); color:#92400e; }

.blai-body { margin-top:12px; }
.blai-note { color:var(--muted); font-size:13px; margin:8px 0; }
.blai-warn { margin-top:8px; padding:10px 12px; border-radius:10px; background:var(--warn-bg); color:#92400e; font-size:13px; }
.blai-ask { margin-top:8px; padding:10px 12px; border-radius:10px; background:#eff6ff; color:#1e3a8a; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.blai-pre { white-space:pre-wrap; overflow-wrap:anywhere; }

/* 对话区：给足高度，滚动条在自己身上，不把整个抽屉撑长 */
.blai-conv { max-height:46vh; overflow:auto; padding:4px 2px; border:1px solid var(--line); border-radius:12px; background:#fbfdff; }
.blai-msg { margin:10px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid var(--line); }
.blai-msg-me { background:#eef2ff; border-color:#c7d2fe; }
.blai-who { font-size:12px; font-weight:700; color:var(--muted); margin-bottom:4px; }
.blai-empty { margin:16px 10px; color:var(--muted); font-size:14px; }
.blai-empty p { margin:4px 0 0; }

.blai-composer { margin-top:12px; }
.blai-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.blai-select { padding:8px 10px; border:1.5px solid var(--line); border-radius:10px; font-size:14px; font-family:inherit; background:#fff; }
.blai-field { display:block; margin-top:10px; font-size:13px; color:var(--muted); }
.blai-field > span { display:inline-block; margin-bottom:4px; }
.blai-field input[type=checkbox] { margin-right:6px; }

.blai-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); min-height:20px; }
.blai-status-ok { color:var(--ok); }
.blai-status-err { color:var(--bad); }

.blai-sec { margin-top:14px; }
.blai-sec-h { display:flex; align-items:center; gap:8px; font-weight:800; margin:14px 0 6px; }
.blai-item { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:10px; background:#fff; }
.blai-tag { display:inline-block; margin:4px 6px 0 0; padding:2px 9px; border-radius:999px; background:#f1f5f9; color:#334155; font-size:12px; }
.blai-phases { margin-top:6px; }

/* 课头按钮行与行内入口 */
.blai-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.blai-inline { display:inline-block; }
.blai-off { font-size:13px; color:var(--warn); }

/* ---------------- 抽屉外壳：手机上要整屏放得下 ----------------
   站内 .demo-ov/.demo-card 是给一屏放得下的小弹窗用的，聊天抽屉照搬会把输入框挤到可视区外。
   这里只加 blai- 前缀的一层，不改站内那两个类——错题演示那个弹窗还在用。 */
.blai-ov {
  align-items:flex-start;                      /* 卡片比容器高时，居中会把顶部顶出去且滚不到 */
  z-index:320;                                 /* 站内「安装到桌面」浮标是 310，不提上来就会压住抽屉的操作行 */
}
/* 抽屉开着的时候把那个浮标收起来：它 fixed 在左下角，和抽屉的「发送」抢同一块地方 */
body.blai-drawer-open #cg-install-fab { display:none !important; }
.blai-card {
  box-sizing:border-box;
  /* auto 外边距居中，而不是容器 align-items:center——后者在卡片比容器高时会把顶部顶出去且滚不到 */
  margin:auto;
  display:flex; flex-direction:column;
  /* 遮罩自己有 16px 内边距，卡片高度必须把它减掉，否则横屏这种矮屏上底部会差一两像素露不出来。
     dvh 那行是给手机的：地址栏收放时 vh 不变，dvh 才是真正看得见的高度。 */
  max-height:min(88vh, calc(100vh - 32px));
  max-height:min(88dvh, calc(100dvh - 32px));
  overflow:hidden;                             /* 滚动交给下面的正文区，卡片本身不滚 */
}
.blai-card > .blai-head { flex:0 0 auto; }
.blai-card > .blai-body { flex:1 1 auto; min-height:0; overflow:auto; }

/* 聊天式：对话区吃掉剩余高度，输入框和发送贴底常驻 */
.blai-card-chat > .blai-body { display:flex; flex-direction:column; overflow:hidden; }
.blai-card-chat .blai-conv { flex:1 1 auto; min-height:96px; max-height:none; }
.blai-card-chat .blai-composer { flex:0 0 auto; overflow:auto; max-height:52%; }

@media(max-width:600px){
  .blai-row { gap:6px; }
  /* 手机上整成底部抽屉：贴底、占满宽度，圆角只留上面两个 */
  .blai-ov { padding:0; align-items:flex-end; }
  .blai-card {
    width:100%; max-width:none;
    margin:0; border-radius:16px 16px 0 0;
    max-height:92vh; max-height:92dvh;
    padding-bottom:calc(12px + env(safe-area-inset-bottom));   /* iPhone 底部横条别压住发送 */
  }
  .blai-head h3 { font-size:16px; }
  .blai-card-chat .blai-conv { min-height:72px; }
}

/* 矮屏（横屏手机、小窗）：对话区再让一点，先保证输入框看得见 */
@media(max-height:520px){
  .blai-ov { padding:8px; }
  .blai-card { max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); }
  .blai-card-chat .blai-conv { min-height:56px; }
}