/**
 * 全站右側浮動聯繫選單（.chic-float-contact）。
 * 由 child theme footer.php 於 </footer> 之後輸出，因此每一頁都有。
 *
 * 設計依據 BRAND-SPEC：暖調棗紅多層漸層（var(--dark-surface)）、只在左側收圓角的
 * 貼邊直立細卡、線性 inline SVG icon、動態一律 cubic-bezier(0.16, 1, 0.3, 1)。
 * 層級 80 < .header 的 90，捲動時永遠壓在 sticky 頁首之下，也壓在行動選單(999)之下。
 */

.chic-float-contact {
  position: fixed;
  /* 位置在「正右垂直置中」與「貼右下角」之間：正右會橫切在內容中段、往下讀時一直在
     旁邊晃；完全貼右下又太低，視線要往下找。改成從底部起算三分之一高度左右，
     以 bottom 加上一段視窗高度的位移達成（不用 top+translate，那在短視窗會被切掉）。 */
  right: 18px;
  bottom: clamp(26px, 18vh, 200px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 56px;
  /* overflow 必須是 visible：hover 標籤是絕對定位在容器左外側的，裁掉就永遠看不到。
     因此圓角改由首尾兩顆自己收（見下方 :first-child / :last-child）。 */
  overflow: visible;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: var(--dark-surface, linear-gradient(140deg, #4a1c1b 0%, #6f2a28 52%, #55211f 100%));
  /* 外圈再加一道暗環：卡片停在深色頁尾上時只靠亮邊仍會糊在一起 */
  box-shadow: 0 0 0 1px rgba(32, 24, 22, .22), 0 18px 46px rgba(32, 24, 22, .3);
  font-family: var(--sans);
}

.chic-float-contact__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  color: rgba(246, 231, 226, .9);
  text-decoration: none;
  transition: var(--ease, all .6s cubic-bezier(0.16, 1, 0.3, 1));
}

/* 首尾兩顆自己收圓角，hover 底色才不會把容器的圓角切成直角（容器不能 overflow:hidden，
   見上方說明）。1px 內縮是讓底色不壓到容器邊框。 */
.chic-float-contact__item:first-child { border-radius: 17px 17px 0 0; }
.chic-float-contact__item:last-child  { border-radius: 0 0 17px 17px; }

/* 分隔線：社群三顆之間的髮絲線（第一顆 CTA 自帶底色，不需要） */
.chic-float-contact__item + .chic-float-contact__item {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}

.chic-float-contact__icon {
  display: inline-flex;
  transition: var(--ease, all .6s cubic-bezier(0.16, 1, 0.3, 1));
}

.chic-float-contact__item:hover,
.chic-float-contact__item:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.chic-float-contact__item:hover .chic-float-contact__icon,
.chic-float-contact__item:focus-visible .chic-float-contact__icon {
  translate: -2px 0;
}

.chic-float-contact__item:focus-visible {
  outline: 2px solid var(--clay, #d9b9aa);
  outline-offset: -3px;
}

/* ① 主 CTA：預約諮詢。玫瑰暖階與下方棗紅拉開明度差，作為整條的視覺重心。 */
.chic-float-contact__item--cta {
  height: 62px;
  color: #fff;
  background: linear-gradient(145deg, #a86c65 0%, #8f4a45 100%);
}

.chic-float-contact__item--cta:hover,
.chic-float-contact__item--cta:focus-visible {
  background: linear-gradient(145deg, #b57b74 0%, #9b544e 100%);
}

/* ② hover / focus 時由右向左滑出的中文標籤 */
.chic-float-contact__label {
  position: absolute;
  right: calc(100% + 10px);
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(140deg, #4a1c1b 0%, #6f2a28 100%);
  box-shadow: 0 12px 28px rgba(32, 24, 22, .24);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  translate: 10px 0;
  pointer-events: none;
  transition: var(--ease, all .6s cubic-bezier(0.16, 1, 0.3, 1));
}

.chic-float-contact__item:hover .chic-float-contact__label,
.chic-float-contact__item:focus-visible .chic-float-contact__label {
  opacity: 1;
  translate: 0 0;
}

/* 平板以下：縮小尺寸、拿掉標籤（觸控沒有 hover），並收掉「預約諮詢」——
   ≤720px 已有外掛的 .chicing-mobile-bar（電話 / LINE / 預約，fixed 底部 58px、z-index 9990）
   承接預約動線，這裡再放一次只是重複又更佔位。收掉後整條只剩三個社群入口（44×132），
   垂直置中，與底部快速列、頁尾 CTA 都不重疊。 */
@media (max-width: 720px) {
  .chic-float-contact {
    width: 44px;
    right: 12px;
    /* 讓開外掛的 .chicing-mobile-bar（fixed 貼底 58px）—— 疊上去會直接蓋掉電話/LINE/預約 */
    bottom: calc(58px + 12px);
    border-radius: 15px;
  }
  .chic-float-contact__item { height: 44px; }
  .chic-float-contact__item--cta { display: none; }
  /* CTA 收掉後，緊接在它後面的那顆才是視覺上的第一顆：接手上圓角、去掉分隔線 */
  .chic-float-contact__item--cta + .chic-float-contact__item {
    border-radius: 14px 14px 0 0;
    box-shadow: none;
  }
  .chic-float-contact__item:last-child { border-radius: 0 0 14px 14px; }
  .chic-float-contact__item svg { width: 18px; height: 18px; }
  .chic-float-contact__label { display: none; }
}

/* 極矮視窗（橫置手機）：底部留白再收一點，整條才不會超出可視範圍 */
@media (max-height: 420px) {
  .chic-float-contact { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .chic-float-contact__item,
  .chic-float-contact__icon,
  .chic-float-contact__label { transition: none; }
  .chic-float-contact__item:hover .chic-float-contact__icon,
  .chic-float-contact__item:focus-visible .chic-float-contact__icon { translate: 0 0; }
  .chic-float-contact__label { translate: 0 0; }
}