/* =========================================================================
   安戰天下 Landing Page — Mobile First
   配色：深藍黑底 / 白字 / 金色點綴 / LIVE 紅 / LINE 綠
   ========================================================================= */

:root{
  --bg:            #0A0E17;
  --bg-2:          #0E1422;
  --surface:       #121A2A;
  --surface-2:     #172136;
  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);

  --text:   #F4F7FB;
  --muted:  #97A3B6;

  --gold:      #D8B45C;
  --gold-soft: rgba(216,180,92,.14);

  --live:   #FF3B30;
  --line:   #06C755;
  --line-d: #05A948;

  --shell:   460px;
  --gutter:  16px;
  --radius:  14px;
  --sticky-h: 70px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;

  /* 瀏覽器把元素捲進畫面時，底部預留 Sticky CTA 的高度 + iPhone safe-area，
     避免焦點元素剛好被固定列蓋住。--sticky-h 由 main.js 依實際高度同步。 */
  scroll-padding-bottom:
    calc(var(--sticky-h,70px) + env(safe-area-inset-bottom) + 12px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);

  font-family:
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;

  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;

  /* 保留 Sticky CTA 的空間，避免遮住最下面的內容。 */
  padding-bottom:
    calc(var(--sticky-h,70px) + env(safe-area-inset-bottom) + 12px);
}

img,iframe{
  display:block;
  max-width:100%;
  border:0;
}

a{
  color:inherit;
  text-decoration:none;
}


/* 桌機置中的內容容器 */
.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
}


/* ---------------------------- Header ---------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:30;

  background:rgba(10,14,23,.92);
  backdrop-filter:saturate(140%) blur(10px);

  border-bottom:1px solid var(--border);
}

.header-inner{
  height:54px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
}

.brand-mark{
  width:22px;
  height:22px;

  border-radius:6px;

  background:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft);
}

.brand-name{
  font-size:16px;
  font-weight:800;
  letter-spacing:.5px;
}


/* -------------------- 觀看人數 + LIVE -------------------- */

/*
  觀看人數與 LIVE 維持同一排。
  不增加 Header 高度，不影響播放器與聊天室位置。
*/
.live-status{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:8px;

  flex:0 0 auto;
}

.viewer-count{
  display:inline-flex;
  align-items:center;

  gap:4px;

  height:26px;
  padding:0 9px;

  border:1px solid var(--border);
  border-radius:999px;

  background:rgba(255,255,255,.05);

  color:#fff;

  font-size:12px;
  font-weight:700;
  line-height:1;

  white-space:nowrap;
}

/* 沒有有效觀看人數時完全隱藏 */
.viewer-count[hidden]{
  display:none !important;
}

.viewer-eye{
  font-size:12px;
  line-height:1;
}


.live-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;

  height:26px;
  padding:0 10px;

  border-radius:999px;

  background:var(--live);
  color:#fff;

  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
}


/* LIVE 紅點（唯一的動畫，很輕） */
.live-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#fff;

  flex:none;

  animation:blink 1.6s ease-in-out infinite;
}

.live-dot.lg{
  width:9px;
  height:9px;
  background:var(--live);
}

@keyframes blink{
  0%,100%{ opacity:1; }
  50%{ opacity:.3; }
}

@media (prefers-reduced-motion:reduce){
  .live-dot{
    animation:none;
  }
}


/* ------------------------- 直播標題 ------------------------- */

.title-block{
  padding:16px 0 10px;
}

.live-now{
  margin:0 0 6px;

  display:flex;
  align-items:center;
  gap:7px;

  color:var(--live);

  font-size:13px;
  font-weight:800;
  letter-spacing:.5px;
}

.live-title{
  margin:0;

  font-size:20px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:.3px;
}


/* ------------------------- 播放器 ------------------------- */

.player-card{
  border-radius:var(--radius);
  overflow:hidden;

  background:#000;

  border:1px solid var(--border-strong);

  box-shadow:0 8px 28px rgba(0,0,0,.5);
}

.player-ratio{
  position:relative;

  width:100%;
  aspect-ratio:16 / 9;

  background:#000;
}


/* 舊瀏覽器 fallback */
@supports not (aspect-ratio:16/9){
  .player-ratio{
    height:0;
    padding-top:56.25%;
  }
}

.player-ratio > iframe,
.player-ratio > .slot-msg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
}

.slot-msg{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:8px;

  padding:20px;

  text-align:center;

  color:var(--muted);

  font-size:13px;

  background:var(--surface);
}

.slot-msg strong{
  color:var(--text);
  font-size:14px;
}

.slot-msg a{
  color:var(--gold);
  text-decoration:underline;
}


/* --------------- LINE 圖示（底部 Sticky 專用）--------------- */

.line-icon{
  flex:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:40px;
  height:40px;

  border-radius:11px;

  background:rgba(255,255,255,.18);

  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
}

.line-icon.sm{
  width:28px;
  height:28px;

  border-radius:8px;

  font-size:10px;
}


/* ------------------------- 區塊標題 ------------------------- */

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin:18px 0 10px;
}

.section-title{
  margin:0;

  font-size:15px;
  font-weight:800;
  letter-spacing:.4px;
}


.chat-toggle{
  display:inline-flex;
  align-items:center;

  gap:6px;

  height:34px;
  padding:0 12px;

  border-radius:999px;

  background:var(--surface-2);

  border:1px solid var(--border-strong);

  color:var(--muted);

  font:inherit;
  font-size:13px;
  font-weight:700;

  cursor:pointer;
}

.chat-toggle:active{
  background:#1D293F;
}

.caret{
  width:0;
  height:0;

  border-left:4.5px solid transparent;
  border-right:4.5px solid transparent;
  border-top:5px solid currentColor;

  transition:transform .18s ease;
}

.chat-toggle[aria-expanded="false"] .caret{
  transform:rotate(180deg);
}


/* ------------------------- 聊天室 ------------------------- */

.chat-head-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.chat-status{
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;

  color:var(--muted);

  white-space:nowrap;

  display:inline-flex;
  align-items:center;
  gap:5px;
}

.chat-status::before{
  content:"";

  width:6px;
  height:6px;

  border-radius:50%;

  background:currentColor;

  flex:none;
}

.chat-status.is-ok{
  color:#4ADE80;
}

.chat-status.is-wait{
  color:var(--gold);
}

.chat-status.is-bad{
  color:var(--live);
}

.chat-status.is-dim{
  color:var(--muted);
}


/*
  這裡不能用 overflow:hidden —— 會建立捲動容器，
  讓 .chat-form 的 position:sticky 失去參考的捲動範圍而完全失效。
*/
.chat-body{
  overflow:visible;
}

.chat-body[hidden]{
  display:none;
}


.chat-panel{
  position:relative;

  /* 明確的直向 flex：訊息列表自己捲動，
     輸入列永遠固定在最下面、不會被推出去 */
  display:flex;
  flex-direction:column;

  /* 面板整體高度上限 = 目前可視高度 − Sticky CTA − 上下各 12px。
     dvh 會跟著 iOS Safari 工具列的收合自動變動；
     vh 是舊瀏覽器的退路。 */
  max-height:
    calc(100vh - var(--sticky-h,70px) - env(safe-area-inset-bottom) - 24px);

  max-height:
    calc(100dvh - var(--sticky-h,70px) - env(safe-area-inset-bottom) - 24px);

  /* 這一塊被捲進畫面時，下緣要留出 Sticky CTA 的空間 */
  scroll-margin-bottom:
    calc(var(--sticky-h,70px) + env(safe-area-inset-bottom) + 12px);

  border-radius:var(--radius);

  background:var(--surface);

  border:1px solid var(--border);

  /*
    不能用 overflow:hidden —— 同樣會讓 .chat-form 的 sticky 失效。
    圓角改由 .chat-list 與 .chat-form 各自處理。
  */
}


/* ---- 訊息列表 ---- */

.chat-list{
  /*
    高度由內容決定，但不得超過 --chat-list-h。
    --chat-list-h 由 chat.js 依「畫面剩餘空間」算出來，
    不寫死任何機型尺寸。
  */
  flex:1 1 auto;

  min-height:0;

  max-height:var(--chat-list-h,340px);

  overflow-y:auto;

  border-radius:
    calc(var(--radius) - 1px)
    calc(var(--radius) - 1px)
    0
    0;

  -webkit-overflow-scrolling:touch;

  overscroll-behavior:contain;

  padding:10px 12px;

  display:flex;
  flex-direction:column;

  gap:7px;
}

.msg{
  font-size:14px;
  line-height:1.5;
  word-break:break-word;
}

.msg-nick{
  font-weight:800;
  margin-right:6px;
}

.msg-nick::after{
  content:"：";
  opacity:.5;
}

.msg-body{
  color:var(--text);
}

.msg-time{
  font-size:11px;
  color:var(--muted);

  margin-left:6px;

  white-space:nowrap;
}

.msg-empty{
  margin:auto;

  text-align:center;

  color:var(--muted);

  font-size:13px;
}


/* ---- 有新訊息（使用者往上翻時才出現）---- */

.chat-jump{
  position:absolute;

  left:50%;

  transform:translateX(-50%);

  bottom:
    calc(var(--chat-form-h,90px) + 8px);

  z-index:2;

  height:30px;
  padding:0 14px;

  border-radius:999px;

  background:var(--gold);
  color:#1A1206;

  border:0;

  font:inherit;
  font-size:12px;
  font-weight:800;

  box-shadow:0 4px 12px rgba(0,0,0,.4);

  cursor:pointer;
}

.chat-jump[hidden]{
  display:none;
}


/* ---- 輸入區 ---- */

.chat-form{
  flex:0 0 auto;

  /*
    ★ 核心：把輸入列釘在 Sticky CTA 上方 12px。

    只要聊天室面板還在畫面內，
    form 的 bottom 就不會低於這條線。

    不需要 JS、不需要 scrollBy、
    也不用精準停在頁面最底。
  */
  position:sticky;

  bottom:
    calc(var(--sticky-h,70px) + env(safe-area-inset-bottom) + 12px);

  z-index:3;

  border-top:1px solid var(--border);

  background:var(--surface-2);

  border-radius:
    0
    0
    calc(var(--radius) - 1px)
    calc(var(--radius) - 1px);

  padding:8px;
}


.chat-row{
  display:flex;
  align-items:flex-end;

  gap:8px;
}

.chat-row[hidden]{
  display:none;
}


.chat-input{
  flex:1 1 auto;

  min-width:0;

  min-height:44px;
  max-height:76px;

  padding:11px 12px;

  border-radius:10px;

  background:#0D1420;

  border:1px solid var(--border-strong);

  color:var(--text);

  font:inherit;
  font-size:16px;

  line-height:1.4;

  resize:none;
}

.chat-input::placeholder{
  color:#6B7787;
}

.chat-input:focus{
  outline:2px solid rgba(216,180,92,.5);
  outline-offset:0;
}


.chat-btn{
  flex:none;

  min-width:64px;

  height:44px;

  padding:0 14px;

  border-radius:10px;

  border:1px solid var(--line-d);

  background:var(--line);

  color:#fff;

  font:inherit;
  font-size:15px;
  font-weight:800;

  cursor:pointer;
}

.chat-btn:active{
  background:var(--line-d);
}

.chat-btn:disabled{
  opacity:.5;
  cursor:default;
}


.chat-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin-top:6px;

  min-height:16px;

  font-size:11px;

  color:var(--muted);
}

.chat-me-wrap{
  display:inline-flex;
  align-items:center;

  gap:6px;

  min-width:0;
}

.chat-me{
  font-weight:700;

  color:var(--text);

  max-width:120px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chat-me:empty{
  display:none;
}

.chat-me:empty + .chat-me-edit{
  display:none;
}

.chat-me-edit{
  background:none;

  border:0;

  padding:0;

  color:var(--gold);

  font:inherit;
  font-size:11px;

  text-decoration:underline;

  cursor:pointer;
}

.chat-hint{
  text-align:right;
}

.chat-hint.is-bad{
  color:#FCA5A5;
}

.chat-hint.is-dim{
  color:var(--muted);
}


/*
  打字中：捲動空間不足時才由 chat.js 加上，
  讓輸入列一定推得上去。

  用 vh 相對單位，不綁定任何特定機型。
*/
body.chat-typing{
  padding-bottom:
    calc(var(--sticky-h,70px) + env(safe-area-inset-bottom) + 30vh);
}


/* ------------------------- Sticky CTA ------------------------- */

.sticky-cta{
  position:fixed;

  left:0;
  right:0;
  bottom:0;

  z-index:40;

  padding:
    9px
    0
    calc(9px + env(safe-area-inset-bottom));

  background:
    linear-gradient(
      to top,
      rgba(10,14,23,.98) 70%,
      rgba(10,14,23,.86)
    );

  border-top:1px solid var(--border);
}

.sticky-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  height:50px;

  border-radius:12px;

  background:var(--line);

  border:1px solid var(--line-d);

  color:#fff;

  font-size:16px;
  font-weight:800;
  letter-spacing:.4px;

  box-shadow:
    0 6px 18px rgba(6,199,85,.28);
}

.sticky-btn:active{
  background:var(--line-d);

  transform:translateY(1px);
}


/* ------------------------- 桌機微調 ------------------------- */

@media (min-width:768px){

  body{
    background:
      radial-gradient(
        120% 60% at 50% 0%,
        #101827 0%,
        var(--bg) 60%
      );
  }

  .shell{
    max-width:480px;
  }

  .live-title{
    font-size:22px;
  }
}