/* LINE 對話模擬 — 手機聊天介面樣式。這個畫面本身仍完全套用 tokens-admin.css
   的間距／字級／半徑／陰影規則；只有下面這一個 LINE 品牌綠色是刻意的例外
   （--line-brand-green），因為這個畫面的目的就是重現「家長在 LINE App 裡
   實際看到的樣子」，用真正的 LINE 綠才有辨識度——不是後台自己的設計語言，
   跟按鈕／卡片／狀態色一律沿用 --a-* token 的規則不衝突，僅此一處例外。

   數值不是官方品牌色 #06C755 本身，是刻意加深後、仍讀得出「LINE 綠」的版本
   （色相不變，只調深）。原因：header 上的白字／85% 透明度次要文字，以及
   家長訊息泡泡的白字，套在官方亮綠 #06C755 上實測只有 2.26:1／1.98:1，遠低
   於 WCAG AA 4.5:1，是一個真的存在的問題——先前一直沒被 Lighthouse 抓到，
   是因為 line-demo.html 有 <768px 平板/桌機閘門，Lighthouse 預設用手機
   viewport 稽核時 `.app-shell` 直接被隱藏，這個綠色 header 從未真的被稽核
   工具看到；家長訊息泡泡也一樣，稽核當下對話還沒開始，泡泡根本不存在於
   DOM。是這次新增 line-demo-embed.html（刻意不做閘門，才能塞進行銷頁窄版
   iframe）讓 header 第一次被完整渲染出來，才第一次被抓到。改成這個深綠色
   後，白字對 header 是 6.07:1、85% 透明度次要文字是 4.86:1，都通過，同一
   組色碼也套用在家長訊息泡泡上（見下面 line-msg 規則），一併修好。 */

:root {
  --line-brand-green: #037234;
}

.line-demo-layout {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr — a grid track's min size defaults to
     auto (the content's max-content width) unless capped at 0. Never an
     issue on line-demo.html itself (its <768px phone-gate means this grid
     never actually renders narrower than 1024px there), but
     line-demo-embed.html has no such gate — it's built to sit in a narrow
     marketing-page <iframe>, where this track was overflowing its own
     container by the width of the widest button label. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-space-5);
  align-items: start;
}

@media (min-width: 1280px) {
  .line-demo-layout {
    grid-template-columns: 360px minmax(0, 1fr);
  }
}

.line-phone-frame {
  position: relative;
}

.line-phone {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  border: 1px solid var(--a-border-strong);
  border-radius: 20px;
  overflow: hidden;
  background: var(--a-surface-raised);
  box-shadow: var(--a-shadow-dropdown);
  display: flex;
  flex-direction: column;
  height: 640px;
}

.line-phone__header {
  flex: none;
  background: var(--line-brand-green);
  color: #fff;
  padding: var(--a-space-3) var(--a-space-4);
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
}

.line-phone__header-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex: none;
}

.line-phone__header-title {
  font-size: var(--a-font-size-body-sm);
  font-weight: var(--a-weight-medium);
}

.line-phone__header-sub {
  font-size: var(--a-font-size-micro);
  opacity: .85;
}

.line-phone__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--a-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--a-space-2);
  background: var(--a-surface-sunken);
}

.line-msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}

.line-msg[data-from="parent"] {
  align-self: flex-end;
  align-items: flex-end;
}

.line-msg[data-from="bot"],
.line-msg[data-from="system"] {
  align-self: flex-start;
  align-items: flex-start;
}

.line-msg__bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: var(--a-font-size-body-sm);
  line-height: 1.6;
  white-space: pre-line;
}

.line-msg[data-from="parent"] .line-msg__bubble {
  background: var(--line-brand-green);
  color: #fff;
  border-radius: 14px 14px 3px 14px;
}

.line-msg[data-from="bot"] .line-msg__bubble {
  background: var(--a-surface-raised);
  color: var(--a-text-primary);
  border: 1px solid var(--a-border-default);
  border-radius: 14px 14px 14px 3px;
}

.line-msg[data-from="system"] .line-msg__bubble {
  background: var(--a-surface-muted);
  color: var(--a-text-secondary);
  font-size: var(--a-font-size-caption);
  border-radius: var(--a-radius-control);
}

.line-msg__tag {
  margin-top: 3px;
  font-size: var(--a-font-size-micro);
  color: var(--a-text-secondary);
}

.line-msg__ref {
  margin-top: 4px;
  font-size: var(--a-font-size-micro);
}

.line-phone__composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
  padding: var(--a-space-2) var(--a-space-3);
  border-top: 1px solid var(--a-border-default);
  background: var(--a-surface-raised);
}

.line-phone__composer input {
  flex: 1;
  border: 1px solid var(--a-border-default);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: var(--a-font-size-body-sm);
  background: var(--a-surface-sunken);
  color: var(--a-text-disabled);
}

.line-phone__composer-send {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--a-text-disabled);
  background: var(--a-surface-muted);
}

/* ---------- Question picker ---------- */
.line-question-group + .line-question-group {
  margin-top: var(--a-space-4);
}

.line-question-group__label {
  font-size: var(--a-font-size-body-sm);
  font-weight: var(--a-weight-medium);
}

.line-question-group__desc {
  margin-top: 3px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.line-question-list {
  margin-top: var(--a-space-3);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-space-2);
}

@media (min-width: 768px) {
  .line-question-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.line-question-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-space-2);
  padding: var(--a-space-3);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
  background: var(--a-surface-raised);
  text-align: start;
  font-size: var(--a-font-size-body-sm);
  min-height: var(--a-min-hit);
}

.line-question-btn:hover {
  border-color: var(--a-border-strong);
  background: var(--a-surface-sunken);
}

.line-question-btn[aria-current="true"] {
  border-color: var(--a-action-primary);
  background: var(--a-status-ai-bg);
  color: var(--a-status-ai-fg);
}

.line-question-btn__arrow {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--a-text-secondary);
}

.line-question-btn--binding {
  border-color: var(--a-status-waiting-border);
  background: var(--a-status-waiting-bg);
}

.line-result-note {
  margin-top: var(--a-space-4);
}

/* ---------- Inline "card" message (帳號綁定驗證卡片) ---------- */
.line-verify-card {
  width: 100%;
  margin-top: 4px;
  padding: var(--a-space-3);
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
}

.line-verify-card__title {
  font-size: var(--a-font-size-caption);
  font-weight: var(--a-weight-medium);
}

.line-verify-card__row {
  margin-top: var(--a-space-2);
}

.line-verify-card__row label {
  display: block;
  font-size: var(--a-font-size-micro);
  color: var(--a-text-secondary);
}

.line-verify-card__row input {
  margin-top: 3px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--a-border-strong);
  border-radius: var(--a-radius-control);
  font-size: var(--a-font-size-body-sm);
}

.line-verify-card__note {
  margin-top: var(--a-space-2);
  font-size: var(--a-font-size-micro);
  color: var(--a-text-secondary);
}

.line-verify-card__actions {
  margin-top: var(--a-space-3);
  display: flex;
  gap: var(--a-space-2);
}

.line-reset-btn {
  display: flex;
  margin-inline: auto;
  align-items: center;
}

.line-reset-btn__icon {
  width: 14px;
  height: 14px;
  margin-inline-end: 6px;
}

/* ---------- 「開啟 LIFF」按鈕（成績/簽到/考試範圍/請假紀錄/學費查詢） ---------- */
.line-msg__liff-open {
  margin-top: 6px;
}

/* LIFF 模擬查詢頁：覆蓋在 .line-phone-frame 之上，取代聊天畫面，模擬
   LINE 裡點開 LIFF 小程式的樣子。單一 dialog 元素，內容由 line-demo.js
   依情境動態填入（見 populateLiff()），不是每個情境各自一份浮層。 */
.line-liff-overlay[data-dialog]:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  background: var(--a-surface-raised);
  border-radius: 20px;
}

.no-js .line-liff-overlay {
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
}

.line-liff-overlay__bar {
  flex: none;
  background: var(--line-brand-green);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
  padding: var(--a-space-2) var(--a-space-3);
}

.line-liff-overlay__back {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
}

.line-liff-overlay__back:hover {
  background: rgba(255, 255, 255, .2);
}

.line-liff-overlay__url {
  font-size: var(--a-font-size-micro);
  opacity: .9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-liff-overlay__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--a-space-4);
}

.line-liff-overlay__body h3 {
  font-size: var(--a-font-size-panel-title);
  font-weight: var(--a-weight-bold);
}

.liff-panel__row {
  display: flex;
  justify-content: space-between;
  gap: var(--a-space-3);
  padding: var(--a-space-2) 0;
  border-bottom: 1px solid var(--a-surface-muted);
  font-size: var(--a-font-size-body-sm);
}

.liff-panel__row:last-child {
  border-bottom: none;
}