/**
 * yunbao.css —— 数字人「云宝」在左栏的落位
 *
 * 2026-10-26 第 5 版。用户给了参考图（青引 Claw）：
 *   品牌名 → 【助手名 + 一句身份 + 人像】 → 新建对话 → 页签。
 * 所以人像从"浮在会话列表上（absolute + 穿透点击）"改成"占一块、就在新建对话上面"。
 * 前几版为什么那么写，留在这儿免得下次又绕回去：
 *
 * ① 第 1 版是 brand 下面一条横卡，独占一块被否；
 * ② 第 2~4 版改成绝对定位浮在列表上，还得靠 pointer-events 让点击穿透，
 *    是因为当时不允许占高度。现在用户明确要"放到新建对话上面"，占高度就是对的。
 *
 * 形象不写死：src 由 app.js 按后台「AI 调度引擎 → 基础设置」下发的地址换
 * （内置 A 马尾抱臂 / 内置 B 披肩 / 上传的图），这里只管摆放。
 *
 * 用 -cut.png（抠好底的透明版）：原图是白底，深色皮肤上会露一块白板。
 * 上传的形象多半也是白底，所以摆位要能容错 —— 右侧留白 + 底部渐隐，看着像"站在卡里"。
 */
/* 2026-10-26 第 6 版（对应已确认的原型 A）：
   **卡是完整的一张卡，只有人像可以出界。**
   上一版为了让头像往上探，把卡改成了「没有上边框、没有上圆角、和顶栏拼成一片渐变」
   的一条 —— 卡本身被拉变形了，用户当场否掉。
   现在卡的边框/圆角/高度/外距全按原样，唯一变的是 overflow:visible：
   人像 184px 从卡底往上画，头顶落到 y≈4，穿过顶栏进到品牌那一行。
   （还有两处配套：.side 的 z-index 提到 21 压过顶栏、.app 只裁到视口边，
     少一处人像就会被裁掉或被顶栏盖住，两种病因用户看到的都是"没头"。） */
.ybslot {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  margin: 12px 12px 10px;
  height: 122px;
  border-radius: 14px;
  border: 1px solid var(--bd2);
  /* 底色从主色淡影走到卡片色：和左边栏有区分，又不抢「新建对话」那颗主按钮 */
  background: linear-gradient(135deg, var(--p-soft2), var(--card) 64%);
  overflow: visible;
}

.ybs-tx {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  /* 右侧留 128px：人像占的就是这一竖条，不留文字会被压在人身下 */
  padding: 16px 128px 12px 13px;
  pointer-events: none;   /* 文字区不吃点击，整块交给 .ybs-hit */
}

/* 品牌（YunqiWork / 云起work 智能办公）2026-10-26 又搬回顶栏最左了
   （用户：「左侧顶部有空格，跟中间明显脱节，要不就把 YunqiWork 这个标题放到顶部」）。
   卡里不再重复产品名，只留「谁在陪你」。 */

/* 细分隔线：把"产品"和"人"分开，不加线会读成五句话连在一起 */
.ybs-line {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  margin: 9px 0 6px;
  background: var(--p);
  opacity: .45;
}

.ybs-nm {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.3;
  color: var(--t1);
}

/* 「在线 · 点我说话」：卡片矮了 10px 之后，光有两行字撑着会空，
   补一条常驻提示 —— 也顺带告诉人"这块是能点的"（点完把光标送进输入框）。 */
.ybs-tip {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  color: var(--t3);
  margin-top: 1px;
  white-space: nowrap;
}

.ybs-sub {
  display: block;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--t3);
  margin-top: 2px;
}

/* 人像：贴右下，裁到胸口以上。object-position:top 保证"头在框里"，
   换成上传的方图/全身图也是先看到脸。 */
.ybs-img {
  position: absolute;
  right: 2px;
  bottom: 0;
  /* 184 高、卡只有 122 → 头顶探出卡面 62px，正好落在顶栏那一行（用户要求
     「数字人再高点，甚至可以顶到系统标题区域」）。 */
  width: 124px;
  height: 184px;
  object-fit: cover;
  object-position: top center;
  /* 底部必须渐隐：人像贴着卡底会被裁成一条直角，把右下圆角和底边框压没，
     读起来像"卡被撑破"。淡出后人像是"沉进卡里"，卡自己的边和圆角都还在。 */
  -webkit-mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, .72) 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, .72) 92%, transparent 100%);
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(15, 30, 60, .14));
  transition: transform .25s ease;
}

/* 点击热区：人像那一竖条。点一下 = 把光标送进输入框（见 index.html 末尾那段） */
.ybs-hit {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 126px;
  z-index: 3;
  cursor: pointer;
}
/* 鼠标扫到人像那一竖条时，人往上抬 3px，表示"点得到" */
.ybslot:hover .ybs-img { transform: translateY(-3px); }

/* 在等她答的时候，起伏快一点，算"我在想"的暗示（只动人像，不动文字） */
body.yb-busy .ybs-img {
  animation: ybFloat 2.6s ease-in-out infinite;
}

@keyframes ybFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  body.yb-busy .ybs-img { animation: none !important; }
}

/* 深色主题下阴影要重一点，否则浅色人像糊在深底上 */
html[data-theme="dark"] .ybs-img,
body.dark .ybs-img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}

/* 窄屏（手机抽屉）：抽屉本来就只有一屏高，先保住「新建对话」和列表。
   —— 手机上它是列表顶部的一张卡，不是浮层，所以只要压一点高度，不用整块隐藏。 */
@media (max-width: 900px) {
  /* 手机上左栏是抽屉、贴屏幕顶，人像再往上探就被裁了；
     而且顶栏没有品牌段（.hd-l 收掉），没什么可顶的 —— 回到卡内。 */
  .ybslot { height: 108px; margin: 8px 10px 8px; }
  .ybs-tx { padding: 11px 104px 9px 12px; }
  .ybs-img { width: 96px; height: 106px; }
  .ybs-hit { width: 98px; }
}

/* 窗口很矮时同理：留给人像的空间让给会话行 */
@media (max-height: 640px) {
  .ybslot { height: 92px; }
  .ybs-img { width: 86px; height: 92px; }
  .ybs-sub { display: none; }
  .ybs-line { margin: 5px 0 4px; }
}