/**
 * 机构站的联系方式与社交账号（Views/web/parts/contacts.php）。
 * 只在这家配了至少一条时加载（layout-site.php）。
 *
 * 展开 / 收起靠 <details>，所以这里没有 .is-open 之类的状态类，
 * 全按 [open] 写。每颗按钮的底色 / 字色由行内的 --c-bg / --c-fg 给
 * （SiteContacts::KINDS 里各家的品牌色），CSS 只负责形状。
 */

/* ---------- 漂浮按钮（右下角）---------- */
.cbar {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 60;
}
/* 概览页手机宽度下底部有操作条（.dock），得站到它上面去；桌面上那条不出，回到角落 */
body:has(.dock) .cbar { bottom: calc(80px + env(safe-area-inset-bottom)); }

.cbar summary { list-style: none; cursor: pointer; user-select: none; }
.cbar summary::-webkit-details-marker { display: none; }

.cbar__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 46px; padding: 0 16px 0 12px; border-radius: var(--mb-radius-pill);
  background: var(--mb-brand); color: #fff;
  font-size: var(--mb-font-base); font-weight: 600;
  box-shadow: var(--mb-shadow-up);
}
.cbar__toggle:hover { background: var(--mb-brand-dark); }
.cbar__toggle-open, .cbar__toggle-close { display: inline-flex; line-height: 0; }
.cbar__toggle-close { display: none; }
.cbar[open] .cbar__toggle-open { display: none; }
.cbar[open] .cbar__toggle-close { display: inline-flex; }

/* 列表挂在开关正上方，往上长；右对齐让长短不一的按钮靠着同一条边 */
.cbar__list {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain;
}
.cbar__list li { display: flex; flex-direction: column; align-items: flex-end; }

.cbar__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 10px; border-radius: var(--mb-radius-pill);
  background: var(--c-bg, var(--mb-brand)); color: var(--c-fg, #fff);
  font-size: var(--mb-font-md); font-weight: 600; text-decoration: none; white-space: nowrap;
  max-width: 68vw; box-shadow: var(--mb-shadow-up); cursor: pointer;
}
.cbar__btn:hover { filter: brightness(.94); color: var(--c-fg, #fff); }
.cbar__text { overflow: hidden; text-overflow: ellipsis; }

/* 二维码 / 账号那张卡：在列里就地展开、往上顶，不会横向出屏 */
.cbar__pop { display: flex; flex-direction: column; align-items: flex-end; }
.cbar__card {
  order: -1; margin-bottom: 8px; width: 200px; padding: 12px; text-align: center;
  background: var(--mb-card); color: var(--mb-text);
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius-lg);
  box-shadow: var(--mb-shadow-up);
}
.cbar__qr {
  display: block; width: 160px; height: 160px; margin: 0 auto 8px;
  object-fit: contain; background: #fff; border-radius: var(--mb-radius-md);
}
.cbar__card-name { font-size: var(--mb-font-md); color: var(--mb-sub); }
.cbar__card-value {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  margin-top: 4px; font-size: var(--mb-font-base); font-weight: 600; word-break: break-all;
}
.cbar__card .btn { margin-top: 10px; }

/* ---------- 页脚 ---------- */
.cfoot {
  margin-bottom: var(--mb-gap-lg); padding-bottom: var(--mb-gap-lg);
  border-bottom: 1px solid var(--mb-line);
}
.cfoot__title { margin: 0 0 8px; font-size: var(--mb-font-base); font-weight: 600; color: var(--mb-text); }
.cfoot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cfoot__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 9px; border-radius: var(--mb-radius-pill);
  background: var(--mb-bg); border: 1px solid var(--mb-line);
  color: var(--mb-text); font-size: var(--mb-font-md); text-decoration: none;
}
.cfoot__chip .ico { color: var(--c-bg, var(--mb-brand-ink)); }
/* Kakao 那种浅黄底色在白底上看不见，图标用字色那档 */
.cfoot__chip[style*="--c-fg:#191919"] .ico { color: #b58b00; }
a.cfoot__chip:hover { border-color: var(--c-bg, var(--mb-brand)); color: var(--mb-text); }
.cfoot__chip .facts__act { margin: -2px 0 -2px 2px; }   /* 胶囊里再套一颗小按钮，别把这一颗撑高 */
.cfoot__qrs { display: flex; flex-wrap: wrap; gap: var(--mb-gap); margin-top: var(--mb-gap); }
.cfoot__qr { margin: 0; text-align: center; }
.cfoot__qr img {
  display: block; width: 96px; height: 96px; object-fit: contain;
  background: #fff; border: 1px solid var(--mb-line); border-radius: var(--mb-radius-md);
}
.cfoot__qr figcaption { margin-top: 4px; font-size: var(--mb-font-sm); color: var(--mb-sub); }
/* 传了二维码的渠道不在上面出胶囊，可点入口落在这行名字上：看得出是能点的，别用默认蓝 */
.cfoot__qr figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cfoot__qr figcaption a:hover { color: var(--mb-brand-ink); }

@media (min-width: 768px) {
  .cbar { right: 24px; bottom: 24px; }
  body:has(.dock) .cbar { bottom: 24px; }
  .cbar__btn { max-width: 320px; }
}