/* 手機對話區塊:字在左、手機在右,整組裝在一塊深色舞台面上。元件 scope 是 .mc_block,
   首頁(landing/mobile_chat.html)與下載 App 分流頁(app_get.html)共用;#box_mobile_chat 只放首頁的區段節奏。
   深色面在面上重映射 --ink／--ink-2,底下的字與連結跟著換,不另寫字色(canon › 語意角色變數)。 */
#box_mobile_chat {
  margin-bottom: 80px;
}

/* 舞台面:radius xl = Editorial 區段容器、無陰影(分隔靠色調)。
   底 --color-darkBody:dark token 裡最不藍的那個,也是首頁 OG 圖(og_home.jpg)的底。
   暖光:--color-primary 以 color-mix 調透明度(68% → 38% → 12% → 透明)疊成一個高窄橢圓,
   仿 OG 圖那團光。這裡的橘是氛圍光,不是 CTA,這段沒有橘鈕。
   光心在右上(76% 0%)、橢圓窄(55% × 135%),是為了讓光從上方一路延伸到手機後面,
   同時不打到左半邊的字:字底下最亮處,標題 ≥7.4:1、副標 ≥5.7:1(AA,實測 1440／1920 en 最低)。
   ≤1300 單欄時字在上方,光改成手機中段後方一團(見 @media),一樣不落在字後面。
   面上重映射 --ink／--ink-2,字跟著換;鍵盤焦點框同樣換成淺色,不然跟深色面同色看不到。
   顆粒 = inline SVG feTurbulence,白色噪點由 feColorMatrix 的數字產生;data URI 裡沒有色碼,
   所以不違反「不寫死 hex」。日後若要在裡面寫色碼,先登記到 web/CLAUDE.md 的 sanctioned 例外。顆粒只鋪在面的 ::before,
   字、QR、徽章、手機都在它上層;不加動畫。 */
.mc_block .mc_panel {
  --ink: var(--color-darkText);
  --ink-2: var(--color-greyLightMedium);
  --focus-ring: var(--color-darkText);
  --mc-glow-size: 55% 135%;
  --mc-glow-at: 76% 0%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-64);
  align-items: center;
  padding: var(--space-48) var(--space-64);
  border-radius: var(--radius-xl);
  background-color: var(--color-darkBody);
  background-image: radial-gradient(ellipse var(--mc-glow-size) at var(--mc-glow-at), color-mix(in srgb, var(--color-primary) 68%, transparent) 0, color-mix(in srgb, var(--color-primary) 38%, transparent) 45%, color-mix(in srgb, var(--color-primary) 12%, transparent) 80%, transparent 100%);
}

.mc_block .mc_panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
}

.mc_block .mc_panel > * {
  position: relative;
  z-index: 1;
}

/* 字塊在左半欄置中,塊內靠左 */
.mc_block .mc_txt {
  justify-self: center;
  max-width: 30em;
}

.mc_block h1,
.mc_block h2 {
  margin: 0;
  color: var(--ink);
}

.mc_block .mc_sub {
  margin: var(--space-16) 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.mc_block .nw {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
}

.mc_block .mc_get {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-32);
}

/* 白底板四周留 16:深色面上 QR 要有足夠的淺色靜區才掃得穩 */
.mc_block .mc_qr {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 168px;
  padding: var(--space-16);
  border-radius: var(--radius-sm);
  background-color: var(--color-pureWhite);
}

.mc_block .mc_qr img {
  display: block;
  width: 136px;
  height: 136px;
  image-rendering: pixelated;
}

/* 官方徽章:高 40、Apple 在前、間距 12(≥ 1/4 徽章高)、熱區 44 */
.mc_block .mc_stores {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

.mc_block .mc_badge {
  display: block;
  padding: 2px 0;
  border-radius: var(--radius-sm);
  line-height: 0;
}

.mc_block .mc_badge img {
  display: block;
  height: 40px;
  width: auto;
}

.mc_block .mc_vis {
  justify-self: center;
  width: 288px;
  aspect-ratio: 418 / 873;
}

.mc_block .mc_shot {
  width: 100%;
  line-height: 0;
}

.mc_block .mc_shot picture,
.mc_block .mc_shot img {
  display: block;
  width: 100%;
  height: auto;
}

html[data-dl-view="mobile"] .mc_block .mc_qr {
  display: none;
}

@media (max-width: 1300px) {
  /* 單欄時字在上方,光從上方打會落在字後面:改成手機中段後方一團 */
  .mc_block .mc_panel {
    --mc-glow-size: 100% 55%;
    --mc-glow-at: 50% 72%;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-48);
    padding: var(--space-48) var(--space-32);
  }

  .mc_block .mc_txt {
    justify-self: stretch;
  }

  .mc_block .mc_vis {
    width: 240px;
  }
}

@media (max-width: 768px) {
  #box_mobile_chat {
    margin-bottom: var(--space-64);
  }

  .mc_block .mc_panel {
    row-gap: var(--space-32);
    padding: var(--space-32) var(--space-16) var(--space-48);
  }

  .mc_block .mc_qr {
    display: none;
  }

  .mc_block .mc_get {
    margin-top: var(--space-24);
  }

  .mc_block .mc_stores {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .mc_block .mc_vis {
    width: 216px;
  }
}