/* ============================================================
   飞书 Web — 按参考截图的界面覆盖
   在 styles.css 之后加载，只写与基础样式不同的部分和新增组件
   ============================================================ */

/* ===== 骨架：导航更窄、列表更宽，列表与主区是两张独立圆角卡片 ===== */
:root {
  --rail-w: 190px;
  --list-w: 304px;
  --gap: 8px;
}
.app { position: relative; }
.list { border-radius: var(--radius-lg); }
.main { border-radius: var(--radius-lg); background: #fff; }

/* 豆包工作 / 应用中心 / 飞行社 / 权益升级：满幅页，无中间列表栏 */
.app.is-full { grid-template-columns: var(--rail-w) 0 1fr; }
.app.is-full .list { display: none; }
.app.is-full .main { margin-left: 0; }

/* 豆包工作：嵌入 doubao/ 下的独立前端，铺满主区 */
.doubao-frame { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* ===== 左侧导航 ===== */
.rail__avatar {
  display: grid; place-items: center;
  color: #fff; font-size: 15px; font-weight: 500;
}
.navitem__icon img { width: 20px; height: 20px; }
.rail__foot { padding: 8px 0 12px; }
.dock--on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #3370ff; }

/* 「更多」弹层 */
.morepop {
  position: absolute; z-index: 60;
  min-width: 168px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(31,35,41,.14);
}
.morepop[hidden] { display: none; }
.morepop__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 36px;
  padding: 0 10px;
  border: none; background: none;
  border-radius: 6px;
  font-size: 14px; color: var(--t1);
  cursor: pointer; text-align: left;
}
.morepop__item:hover { background: var(--hover); }
.morepop__item--on { background: var(--blue-weak); color: var(--blue); }
.morepop__ic { width: 20px; height: 20px; display: grid; place-items: center; }
.morepop__item .navitem__badge { position: static; margin-left: auto; }

/* ===== 中间列表：会话 ===== */
.list__title { font-size: 18px; font-weight: 600; }
.pingrid { grid-template-columns: repeat(5, 1fr); padding: 4px 8px 10px; }
.pin__av { width: 40px; height: 40px; }
.pin__name { font-size: 12px; color: var(--t2); }

.crow { min-height: 62px; padding: 10px 10px 10px 10px; align-items: center; }
.crow--on, .crow--on:hover { background: #e9effd; box-shadow: none; }
.crow__av { width: 40px; height: 40px; flex: 0 0 40px; margin-top: 0; font-size: 13px; }
.crow__name { font-size: 15px; }
.crow__prev { font-size: 13.5px; margin-top: 4px; }
.crow__tag { font-size: 11.5px; padding: 1px 5px; border-radius: 4px; }
.crow__tag--official { background: #e1eaff; color: #3370ff; }
.crow__tag--left     { background: #eff0f1; color: #646a73; }
.crow__tag--bot      { background: #fdf3d6; color: #b7791f; }
.crow__tag--ext      { background: #e1eaff; color: #3370ff; }
.crow__tag--agent    { background: #e9e7ff; color: #5b4ce0; }

/* 官方账号的品牌头像：图形居中，不显示首字 */
.av--brand { display: grid; place-items: center; overflow: hidden; }
.av--brand > svg, .av--brand > img { display: block; }

/* ===== 会话头部 ===== */
.chead { padding: 0 18px; background: #fff; border-bottom: 1px solid var(--line-soft); }
.chead__row { height: 64px; gap: 10px; }
.chead__av { width: 36px; height: 36px; flex: 0 0 36px; }
.chead__title { font-size: 17px; }
.chead__cnt {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; color: var(--t3); flex: 0 0 auto;
}
.chead__sep { width: 1px; height: 12px; background: var(--line); flex: 0 0 1px; }
.chead__tag { font-size: 11.5px; padding: 1px 5px; }
.chead__tag.crow__tag--official, .chead__tag.crow__tag--ext { background: #e1eaff; color: #3370ff; }
.chead__tag.crow__tag--bot { background: #fdf3d6; color: #b7791f; }
.chead__tag.crow__tag--left { background: #eff0f1; color: #646a73; }
.chead__acts { gap: 8px; }
.hbtn { width: 32px; height: 32px; color: #2b2f36; }
.hbtn--doubao img { width: 22px; height: 22px; }
.ctabs { margin: 0 -18px; }

/* ===== 消息流 ===== */
.stream { padding-top: 6px; }
.stream__inner { padding: 0 24px 0 18px; }
.stream__day {
  text-align: center;
  font-size: 12.5px; color: var(--t3);
  margin: 4px 0 22px;
}
.msg__av { width: 36px; height: 36px; flex: 0 0 36px; }
.msg__meta { align-items: center; }
.msg__badge {
  font-size: 11px; line-height: 1.4;
  padding: 0 4px; border-radius: 3px;
  background: #fdf3d6; color: #b7791f;
}

/* ===== 官方活动推送卡片 ===== */
.promo {
  width: 590px; max-width: 100%;
  border: 1px solid #e4e6eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(31,35,41,.04);
}
.promo__head {
  padding: 12px 16px 11px;
  background: linear-gradient(100deg, #eef1ff 0%, #f3efff 60%, #f6f2ff 100%);
}
.promo__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 600; color: #3654d1;
  letter-spacing: .2px;
}
.promo__spark { color: #7b5bf0; font-size: 17px; }
.promo__sub { margin-top: 5px; padding-left: 25px; font-size: 14px; color: #3654d1; }
.promo__body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.promo__banner {
  position: relative;
  height: 224px;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(170,205,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(50% 70% at 10% 90%, rgba(185,220,255,.5), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, #e7f0ff 0%, #f5f9ff 55%, #e9f2ff 100%);
}
.promo__brands {
  position: absolute; left: 18px; top: 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #1f2329;
}
.promo__brand { display: inline-flex; align-items: center; gap: 5px; }
.promo__logo { width: 20px; height: 20px; display: inline-block; object-fit: contain; }
.promo__bar { width: 1px; height: 14px; background: #1f2329; opacity: .6; }
.promo__big {
  position: absolute; left: 0; right: 0; top: 50px;
  display: flex; flex-direction: column; align-items: center;
  font-size: 44px; line-height: 1.12; font-weight: 900; font-style: italic;
  color: #121417; letter-spacing: 1px;
}
.promo__slogan {
  position: absolute; right: 108px; bottom: 22px;
  display: flex; gap: 10px;
  font-size: 19px; font-weight: 800; font-style: italic; color: #2d4fd6;
}
.promo__slogan2 { border-bottom: 2px solid #2d4fd6; border-radius: 0 0 40% 0; padding-bottom: 1px; }
.promo__float {
  position: absolute;
  width: 58px; height: 58px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(51,112,255,.18);
  display: grid; place-items: center;
}
.promo__float img, .promo__float svg { width: 34px; height: 34px; object-fit: contain; }
.promo__float--l { left: 50px; top: 108px; transform: rotate(-10deg); }
.promo__float--r { right: 58px; top: 50px; transform: rotate(10deg); }

.promo__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.promo__feat {
  border-radius: 6px;
  padding: 10px 8px 11px;
  text-align: center;
}
.promo__feat--0 { background: #edf3fb; }
.promo__feat--1 { background: #e8f7f4; }
.promo__feat--2 { background: #e1f1fa; }
.promo__featT { font-size: 14px; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
.promo__featD { font-size: 13px; line-height: 1.55; color: #3f454d; }

.promo__hl {
  border-radius: 6px;
  background: #fdeff3;
  padding: 10px 12px 11px;
}
.promo__hlT { text-align: center; font-size: 15px; font-weight: 600; color: #d8322e; margin-bottom: 6px; }
.promo__hlR { font-size: 13.5px; line-height: 1.75; color: var(--t1); }
.promo__hlR b { font-weight: 600; }

.promo__btn {
  height: 38px;
  border: none; border-radius: 6px;
  background: #2b5fe6;
  color: #fff; font-size: 14.5px;
  cursor: pointer;
}
.promo__btn:hover { background: #2453cf; }

/* ===== 输入区 ===== */
.composer { padding: 6px 20px 16px 18px; }
.composer__links { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.qlink {
  height: 30px; padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 13.5px; color: var(--t1);
  cursor: pointer;
}
.qlink:hover { background: #f5f6f7; }
.composer__box { min-height: 50px; padding: 0 10px 0 16px; }
.composer__input { font-size: 15px; }
.cbtn--split { width: auto; padding: 0 4px; display: inline-flex; align-items: center; gap: 1px; }
.cbtn__chev { display: grid; place-items: center; color: #8f959e; }
.cbtn--sendopt { width: 18px; color: #8f959e; }

/* ===== 应用中心 ===== */
.appgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.appcard {
  display: flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
  cursor: pointer; text-align: left;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.appcard:hover { border-color: #cfd6e0; box-shadow: 0 2px 8px rgba(31,35,41,.06); }
.appcard__ic {
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center; flex: 0 0 36px;
}
/* 图标里的灰色描边在彩色底上改成白色 */
.appcard__ic svg [stroke="#6b7178"] { stroke: #fff; }
.appcard__ic svg [fill="#6b7178"] { fill: #fff; }
.appcard__ic svg [stroke="currentColor"] { stroke: #fff; }
.appcard__ic svg [fill="currentColor"] { fill: #fff; }
.appcard__ic svg rect[fill="#fff"] { fill: rgba(255,255,255,.35); }
.appcard__t { font-size: 14.5px; color: var(--t1); }

/* 列头的「更多 / 搜索 / 设置」按需显示：基础样式里的 display 会盖过 hidden 属性 */
.list__more[hidden], .list__acts[hidden] { display: none; }
.promo__btn { text-align: center; }
.grow__ic--round { border-radius: 50%; }