/* 前台共用樣式。對應原型 helmet 內的 <style> 區塊。 */

:root {
  --font-heading: "Barlow Condensed", "Noto Sans TC", system-ui, sans-serif;
  --font-body: "Barlow", "Noto Sans TC", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  text-wrap: pretty;
  font-family: var(--font-body);
  line-height: 1.7;
  background: var(--color-bg);
  color: var(--color-text);
}

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); }

/* hidden 屬性一律蓋過 inline 的 display。
   瀏覽器內建的 [hidden]{display:none} 權重比 style 屬性低，
   只要元素身上同時有 hidden 與 inline display，隱藏就會失效，
   三個畫面會全部疊在一起顯示。JS 是用 hidden 開關畫面的，
   所以這條規則是畫面切換能不能運作的前提。 */
[hidden] { display: none !important; }

@keyframes rk-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes rk-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes rk-bar { 0%, 100% { transform: scaleY(.25) } 50% { transform: scaleY(1) } }

/* ── iPhone 外框（改寫自 ios-frame.jsx 的 IOSDevice） ───────────── */

.ios-device {
  width: 402px;
  height: 874px;
  border-radius: 48px;
  overflow: hidden;
  position: relative;
  background: #f2f2f7;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .12);
  font-family: -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  flex: none;
}

.ios-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  border-radius: 24px;
  background: #000;
  z-index: 50;
}

.ios-statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 154px;
  padding: 21px 24px 19px;
  box-sizing: border-box;
  width: 100%;
}

.ios-statusbar > div {
  flex: 1;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ios-statusbar .ios-time {
  font-family: -apple-system, "SF Pro", system-ui;
  font-weight: 590;
  font-size: 17px;
  line-height: 22px;
  color: #000;
}

.ios-statusbar .ios-icons { gap: 7px; padding-right: 1px; }

.ios-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ios-screen > .ios-content {
  flex: 1;
  overflow: auto;
}

.ios-home {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8px;
  pointer-events: none;
}

.ios-home > span {
  width: 139px;
  height: 5px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .25);
}

/* 螢幕鍵盤（新人端 App 的聊天畫面用） */

.ios-keyboard {
  position: relative;
  z-index: 15;
  border-radius: 27px;
  overflow: hidden;
  padding: 11px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, .018), 0 -3px 20px rgba(0, 0, 0, .012);
}

.ios-keyboard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 27px;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 255, 255, .25);
}

.ios-keyboard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 27px;
  box-shadow: inset 1.5px 1.5px 1px rgba(255, 255, 255, .7), inset -1px -1px 1px rgba(255, 255, 255, .4);
  border: .5px solid rgba(0, 0, 0, .06);
  pointer-events: none;
}

.ios-kb-suggest {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 8px 22px 13px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.ios-kb-suggest > span {
  flex: 1;
  text-align: center;
  font-family: -apple-system, system-ui;
  font-size: 17px;
  color: #333;
  letter-spacing: -.43px;
  line-height: 22px;
}

.ios-kb-suggest > i {
  width: 1px;
  height: 25px;
  background: #ccc;
  opacity: .3;
}

.ios-kb-rows {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 0 6.5px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.ios-kb-row {
  display: flex;
  gap: 6.5px;
  justify-content: center;
}

.ios-kb-key {
  height: 42px;
  border-radius: 8.5px;
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .075);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, "SF Compact", system-ui;
  font-size: 25px;
  font-weight: 458;
  color: #595959;
}

.ios-kb-key.wide { flex: none; width: 45px; }
.ios-kb-key.action { flex: none; width: 92.25px; font-size: 18px; }
.ios-kb-key.enter { background: #08f; color: #fff; }
.ios-kb-spacer { height: 56px; width: 100%; position: relative; }

/* ── App 展示畫面的版面骨架 ──────────────────────────────────────
   這幾個 class 取代原本寫在 Blade 裡的 inline style。
   收進 CSS 才能讓下面的手機版規則覆蓋得掉：
   inline style 的權重比 media query 裡的 class 高，寫在 HTML 上就改不動。 */

/* AI 教練頁的外層容器。
   內距與寬度收進 CSS，手機版才有辦法把它歸零：inline style 的權重
   比 media query 裡的 class 高，寫在 HTML 上就改不動。 */
.app-page {
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 72px) 80px;
  max-width: 1200px;
  margin: 0 auto;
}

/* AI 教練頁右側的說明欄（訓練流程、評分維度、原型說明）。
   樣式一樣收進 CSS，手機版才隱藏得掉。 */
.app-page-aside {
  flex: 1;
  min-width: 260px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 一支手機的內容畫布。上方留白是為了避開狀態列與 Dynamic Island。 */
.app-canvas {
  box-sizing: border-box;
  min-height: 100%;
  padding: 64px 16px 44px;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

/* 內部要靠 flex 撐滿整支機身高度的畫布（對話畫面用）。 */
.app-canvas.is-fill { height: 100%; min-height: 0; }

/* 底部接著螢幕鍵盤的畫布，下緣留白要收窄。 */
.app-canvas.is-tight { padding-bottom: 12px; }

/* ── AI 教練的綠色畫布 ──────────────────────────────────────────
   這一頁的機身底色是深橄欖綠。這個綠的相對亮度大約是 0.21，剛好卡在中間：
   白字對比只有 4.0:1，設計系統原本的深色文字 #1d1f20 也只有 4.2:1，
   兩個都低於內文需要的 4.5:1。所以綠底上的文字一律改用更深的墨綠色
   （對比 4.7:1，量測過），層次靠字級與字重做出來，不要再用半透明的灰階
   把次要文字調淡——那種寫法是為淺色底設計的，放到這個綠上會直接糊掉。

   設計系統的 accent 是藍色 #5980a6，實心按鈕放在綠底上又撞色又不顯眼，
   所以按鈕在這一頁改用同一組墨綠色。

   白色卡片與對話框裡的文字不受影響，維持設計系統原本的顏色。 */
.app-canvas.is-coach {
  --canvas: #628b0b;
  --canvas-ink: #0d1204;
  --canvas-on-ink: #f3f6ec;
  --canvas-line: color-mix(in srgb, var(--canvas-ink) 34%, transparent);
  background: var(--canvas);
}

.is-coach .app-screen {
  color: var(--canvas-ink);
}

/* 白色卡片與對話串內部退回設計系統的文字色，綠底的規則不要蓋進去。 */
.is-coach .blueprint,
.is-coach .app-thread {
  color: var(--color-text);
}

.is-coach .btn-primary {
  background: var(--canvas-ink);
  border-color: var(--canvas-ink);
  color: var(--canvas-on-ink);
}

.is-coach .btn-primary:hover {
  background: #16200a;
  border-color: #16200a;
}

.is-coach .btn-primary:active {
  background: #050802;
  border-color: #050802;
}

.is-coach .btn-secondary {
  color: var(--canvas-ink);
  border-color: color-mix(in srgb, var(--canvas-ink) 55%, transparent);
}

.is-coach .btn-secondary:hover {
  background: color-mix(in srgb, var(--canvas-ink) 10%, transparent);
  border-color: var(--canvas-ink);
}

.is-coach .btn-secondary:active {
  background: color-mix(in srgb, var(--canvas-ink) 18%, transparent);
}

.is-coach .btn-ghost {
  color: var(--canvas-ink);
}

.is-coach .btn-ghost:hover {
  background: color-mix(in srgb, var(--canvas-ink) 12%, transparent);
}

.is-coach .btn-ghost:active {
  background: color-mix(in srgb, var(--canvas-ink) 20%, transparent);
}

/* 「結束並評分」是線框按鈕，btn-ghost 預設沒有邊框，這裡補一條看得見的。 */
.is-coach [data-finish-early] {
  border-color: color-mix(in srgb, var(--canvas-ink) 45%, transparent);
}

.is-coach [data-finish-early]:hover {
  border-color: var(--canvas-ink);
}

/* 同一支手機裡互相切換的單一畫面。 */
.app-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 內部已經有自己的捲動區的畫面（對話畫面），外層不要再多一層捲軸。 */
.app-screen.is-static { overflow: hidden; }

/* 在機身內自己捲動的彈性區塊。手機版改成往下長，不再自己開捲軸。 */
.app-flow {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 對話訊息區的外觀。捲動行為由 .app-flow 負責，兩個 class 一起用。 */
.app-thread {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 12px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}

/* ── 手機寬度：不畫手機外框，App 內容直接全寬 ──────────────────
   機身寬 402px 再加上頁面左右留白，在手機一定會橫向溢出。
   與其等比縮小讓字跟著變小，不如在窄螢幕拿掉整個外殼、狀態列、
   home 指示條與螢幕鍵盤——使用者本來就在手機上，再畫一支假手機
   沒有意義。內部各區塊也不再自己開捲軸，全部交給頁面主捲軸。 */
@media (max-width: 640px) {
  .ios-device {
    width: 100%;
    height: auto;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
  }

  /* 包住手機的外層區塊也要占滿寬度，
     否則它會依自己的內容縮寬，幾支手機看起來寬窄不一。 */
  .app-frame { width: 100%; }

  .ios-island,
  .ios-statusbar,
  .ios-home,
  .ios-keyboard { display: none; }

  .ios-screen { height: auto; }
  .ios-screen > .ios-content { overflow: visible; }

  .app-canvas,
  .app-canvas.is-fill,
  .app-canvas.is-tight {
    height: auto;
    min-height: 0;
    padding: 0 0 8px;
  }

  .app-screen,
  .app-screen.is-static {
    height: auto;
    overflow: visible;
  }

  /* ── 手機版的 AI 教練頁：收掉官網外包裝，只留 App ───────────────
     手機使用者打開網址就直接看到 App 畫面，不必先捲過一段介紹文案。
     這幾條只作用在標了 .app-page 的頁面，官網首頁與新人端不受影響。 */
  .app-page {
    padding: 0;
    max-width: none;
  }

  /* 上方的標題與說明段落、下方的訓練流程與評分維度卡片，手機版一律不顯示。 */
  .app-page-intro,
  .app-page-aside { display: none; }

  /* App 的底色要鋪滿整個視窗，內容短的時候才不會在下面露出頁面底色。
     100dvh 會跟著行動瀏覽器網址列的伸縮改變，不支援的瀏覽器退回 100vh。 */
  .app-page .app-canvas,
  .app-page .app-canvas.is-fill,
  .app-page .app-canvas.is-tight {
    min-height: 100vh;
    min-height: 100dvh;
    /* 外層容器的內距已經歸零，這裡補回來，同時避開瀏海與底部的手勢列。
       env() 要有 viewport-fit=cover 才會回傳非零值，見 layouts/site.blade.php。 */
    padding:
      calc(16px + env(safe-area-inset-top))
      calc(16px + env(safe-area-inset-right))
      calc(16px + env(safe-area-inset-bottom))
      calc(16px + env(safe-area-inset-left));
  }

  .app-flow {
    flex: none;
    overflow: visible;
  }
}