/* Shared desktop contact rail — 朱红 · 雅白. Available throughout the public and member site. */
#contact-dock {
  --contact-red: var(--red, #ed2729);
  z-index: 85;
  right: var(--contact-dock-right, max(16px, calc((100% - 1440px) / 2 - 104px)));
  top: var(--contact-dock-top, 50%);
  bottom: auto;
  transform: none;
  flex-direction: column;
  align-items: stretch;
  width: 76px;
  gap: 0;
  padding: 7px 5px 6px;
  border: 1px solid #e7e5e3;
  border-top: 2px solid var(--contact-red);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 6px #29231e05, 0 10px 28px #29231e0a;
}
#contact-dock > :is(button, a) {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  gap: 5px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #373536;
  font: 500 11px/1.5 Arial, "Microsoft YaHei", sans-serif;
  text-align: center;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
#contact-dock > :is(button, a) > i { display: block; color: var(--contact-red); font-size: 22px; line-height: 1; }
#contact-dock > :is(button, a) > span { max-width: none; white-space: nowrap; overflow-wrap: normal; }
#contact-dock > :is(button, a):not(.contact-dock-service):not(:has(+ .contact-dock-service)):not(:last-child)::after {
  content: ""; position: absolute; width: 32px; left: calc(50% - 16px); bottom: 0; border-bottom: 1px solid #eeecea;
}
#contact-dock > :is(button, a):hover,
#contact-dock > button[aria-expanded="true"] { background: #fff3f2; color: var(--contact-red); }
#contact-dock > :is(button, a).contact-dock-service { min-height: 56px; margin: 3px 0 0; background: var(--contact-red); color: #fff; }
#contact-dock > .contact-dock-service > i { color: inherit; font-size: 23px; }
#contact-dock > .contact-dock-service:hover,
#contact-dock > .contact-dock-service[aria-expanded="true"] { background: #d81c25; }
#contact-dock > :is(button, a):focus-visible { outline: 2px solid var(--contact-red); outline-offset: 3px; }

/* Narrow desktop windows keep the full page width; contact actions sit at the bottom right. */
@media (max-width: 1679px) {
  #contact-dock {
    top: auto;
    right: 24px;
    bottom: 24px;
    left: auto;
    transform: none;
    flex-direction: row;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 5px;
  }
  #contact-dock > :is(button, a) {
    flex-direction: row;
    min-height: 40px;
    padding: 0 10px;
    gap: 6px;
  }
  #contact-dock > :is(button, a) > i { font-size: 19px; }
  #contact-dock > :is(button, a).contact-dock-service { min-height: 40px; margin: 0 0 0 3px; }
  #contact-dock > :is(button, a):not(.contact-dock-service):not(:has(+ .contact-dock-service)):not(:last-child)::after {
    width: 0;
    height: 18px;
    top: calc(50% - 9px);
    right: 0;
    bottom: auto;
    left: auto;
    border-bottom: 0;
    border-left: 1px solid #eeecea;
  }
}

/* The footer retains the complete modal directory; both presentations use brand red. */
#contact-directory { color: #302e2e; border-color: #e7e5e3; }
#contact-directory .contact-choice-list { --contact-color: #ed2729; --contact-tint: #fff3f2; --contact-line: #f5c5c3; }
#contact-directory .contact-dialog-icon { background: #fff0ef; color: #ed2729; }
#contact-directory .contact-switch { background: #f6f5f4; }
#contact-directory .contact-switch button[aria-pressed="true"] { color: #ed2729; }
#contact-directory .contact-detail { background: #faf9f8; border-color: #ece9e6; }
#contact-directory.contact-single .contact-detail { background: #fff; }
#contact-directory :is(.contact-detail-name, .contact-entry-label strong) { color: #302e2e; }

/* A dock entry opens an adjacent non-modal panel, so the other entries remain usable. */
html:has(#contact-directory[data-presentation="dock"][open]):not(:has(dialog:modal)) { overflow: auto; }
html:has(#contact-directory[data-presentation="dock"][open]) #contact-dock { visibility: visible; }
#contact-directory[data-presentation="dock"] {
  position: fixed;
  inset: auto;
  z-index: 90;
  width: 280px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  margin: 0;
  padding: 18px 16px 16px;
  border: 1px solid #e7e5e3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 12px #30251d08, 0 16px 40px #30251d10;
  text-align: left;
  scrollbar-width: thin;
}
#contact-directory[data-presentation="dock"] .contact-close { top: 12px; right: 10px; width: 28px; height: 28px; color: #989293; }
#contact-directory[data-presentation="dock"] .contact-close:hover { background: #fff3f2; color: #ed2729; }
#contact-directory[data-presentation="dock"] .contact-dialog-icon { float: left; width: 38px; height: 38px; margin: 0 10px 12px 0; border-radius: 50%; font-size: 22px; }
#contact-directory[data-presentation="dock"] h2 { margin: 0 18px 3px 0; color: #302e2e; font-size: 16px!important; line-height: 1.5; }
#contact-directory[data-presentation="dock"] [data-contact-description] { min-height: 0; margin: 0 8px 12px 48px; color: #888184; font-size: 11px; line-height: 1.7; }
#contact-directory[data-presentation="dock"] .contact-switch { display: none; }
#contact-directory[data-presentation="dock"] .contact-collection { display: block; clear: both; }
#contact-directory[data-presentation="dock"] .contact-collection[hidden] { display: none; }
#contact-directory[data-presentation="dock"] .contact-options { padding: 0; }
#contact-directory[data-presentation="dock"] .contact-options :is(h3, .contact-options-note, .contact-entry-mark, .contact-entry-label small, .contact-selected-icon) { display: none; }
#contact-directory[data-presentation="dock"] .contact-choice-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
#contact-directory[data-presentation="dock"] .contact-choice { flex: 1 1 auto; min-height: 34px; justify-content: center; align-items: center; padding: 7px 9px; border: 1px solid #ede9e7; border-radius: 7px; background: #fff; }
#contact-directory[data-presentation="dock"] .contact-choice .contact-entry-label strong { color: #756d70; font-size: 11px; font-weight: 500; }
#contact-directory[data-presentation="dock"] .contact-choice:hover,
#contact-directory[data-presentation="dock"] .contact-choice[aria-pressed="true"] { border-color: #f5c5c3; background: #fff3f2; box-shadow: none; }
#contact-directory[data-presentation="dock"] .contact-choice[aria-pressed="true"] .contact-entry-label strong { color: #d82028; font-weight: 600; }
#contact-directory[data-presentation="dock"] .contact-detail { padding: 0; border: 0; border-radius: 0; background: #fff; }
#contact-directory[data-presentation="dock"] .contact-detail-name { display: block; min-height: 0; margin: 0 0 4px; font-size: 13px; }
#contact-directory[data-presentation="dock"] .contact-detail-description { color: #888184; font-size: 11px; }
#contact-directory[data-presentation="dock"].contact-single :is(.contact-detail-name, .contact-detail-description) { display: none; }
#contact-directory[data-presentation="dock"] .contact-code-frame { width: 180px; max-width: 100%; margin: 12px auto 10px; padding: 0; border: 0; border-radius: 0; }
#contact-directory[data-presentation="dock"].contact-single .contact-code-frame { width: 164px; }
#contact-directory[data-presentation="dock"] .contact-dialog-action { margin: 0; color: #373536; font-size: 12px; font-weight: 500; }
#contact-directory .contact-code-empty { margin: 20px 0; color: #888184; font-size: 12px; line-height: 1.8; }
#contact-directory[data-presentation="dock"] .contact-dialog-hint { display: none; }
#contact-directory[data-presentation="dock"] .contact-dialog-service { margin-top: 12px; padding-top: 10px; border-color: #efebe9; gap: 6px 10px; font-size: 12px; }
#contact-directory[data-presentation="dock"] .contact-qr-fallback { margin-top: 14px; padding-top: 12px; border-color: #efebe9; font-size: 11px; }
#contact-directory[data-presentation="dock"] .contact-cooperation-link { margin-top: 12px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { #contact-dock > :is(button, a) { transition: none; } }