/* ═══════ Auth gate styles + splash — 登入 overlay / user pill / 啟動畫面，不污染主 style.css ═══════
   Extracted from index.html in v47 (行數債清償). */

/* ─── Splash — 第一個 paint，brand mark fade-in ─────────────
   z-index 10000 蓋過 auth overlay (9999)。bg 跟 auth overlay 同色 (#0a0a0c) — 未登入時
   splash → overlay 視覺無接縫。 */
#nexa-splash {
  position: fixed; inset: 0; z-index: 10000;
  background: #0a0a0c;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s ease;
  pointer-events: none; /* 純視覺，永不擋 click/tap */
}
#nexa-splash.nexa-splash--hidden { opacity: 0; }
.nexa-splash-mark {
  width: 96px; height: 96px;
  display: block;
  /* icon PNG 已自帶圓角 + 藍紫漸層 + sparkle，外層只加 drop-shadow 讓 logo 浮起 */
  filter: drop-shadow(0 14px 40px rgba(93, 108, 230, .5));
  animation: nexaSplashIn .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes nexaSplashIn {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nexa-splash-mark { animation: none; }
  #nexa-splash { transition: opacity .15s ease; }
}


/* ─── Auth overlay — Linear / Vercel / Supabase 風格的 modern login ──────── */
#nexa-auth-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  color: #ededee;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: #0a0a0c;
  overflow: hidden;
}
#nexa-auth-overlay.show { display: flex; }

/* Animated mesh blobs — 3 個 colored gradient 慢慢飄，純 CSS 無 JS。
   用 will-change + transform 讓瀏覽器走 GPU compositing 不掉幀。 */
.nexa-auth-mesh {
  position: absolute; inset: -100px;
  pointer-events: none;
  filter: blur(80px); opacity: .55;
}
.nexa-auth-mesh::before,
.nexa-auth-mesh::after,
.nexa-auth-mesh > span {
  content: ""; position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  will-change: transform;
}
.nexa-auth-mesh::before {
  background: radial-gradient(circle, #8B7FD9 0%, transparent 65%);
  top: -10%; left: -8%;
  animation: nexaBlob1 18s ease-in-out infinite alternate;
}
.nexa-auth-mesh::after {
  background: radial-gradient(circle, #ff8b3b 0%, transparent 65%);
  bottom: -10%; right: -8%;
  animation: nexaBlob2 22s ease-in-out infinite alternate;
}
.nexa-auth-mesh > span {
  background: radial-gradient(circle, #5b6cff 0%, transparent 65%);
  top: 30%; left: 50%; transform: translateX(-50%);
  animation: nexaBlob3 20s ease-in-out infinite alternate;
}
@keyframes nexaBlob1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes nexaBlob2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-50px, -30px) scale(.9); } }
@keyframes nexaBlob3 { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-30%) scale(1.1); } }

/* 細顆粒紋理 — modern SaaS（Linear / Vercel）標配，避免 gradient 太純色塑膠感 */
.nexa-auth-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.nexa-auth-card {
  position: relative; z-index: 1;
  max-width: 400px; width: 90%;
  padding: 40px 36px 32px;
  text-align: center;
  background: rgba(20, 20, 26, 0.6);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

/* Brand mark — 正版 NEXA icon（藍紫 N + sparkle），跟 splash 視覺一致 */
.nexa-auth-mark {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  display: block;
  /* icon PNG 已自帶圓角 + 漸層 + sparkle，drop-shadow 讓 logo 浮在卡片上 */
  filter: drop-shadow(0 10px 26px rgba(93, 108, 230, .45));
}

.nexa-auth-brand {
  font-size: 26px; font-weight: 700;
  color: #ededee;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.nexa-auth-tagline { color: #8a8a92; font-size: 13.5px; margin-bottom: 28px; line-height: 1.5; }

.nexa-auth-btn {
  width: 100%; padding: 13px 20px; border-radius: 10px;
  background: #fff; color: #1a1a1f;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14.5px; font-weight: 500; font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.nexa-auth-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139, 127, 217, .25); }
.nexa-auth-btn:active { transform: translateY(0); }
.nexa-auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 「或」分隔線 — Linear / Vercel 用這個視覺隔開兩種登入方式 */
.nexa-auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0;
  color: #6a6a72; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px;
}
.nexa-auth-or::before, .nexa-auth-or::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* Email 表單 — 比照 Supabase / Vercel 登入 input 質感 */
.nexa-auth-email-form { display: flex; flex-direction: column; gap: 8px; }
.nexa-auth-input {
  width: 100%; padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #ededee; font-size: 14px; font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.nexa-auth-input::placeholder { color: #6a6a72; }
.nexa-auth-input:focus {
  outline: none;
  border-color: rgba(139, 127, 217, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
/* Secondary button — 對比 primary Google 白底，這個用透明 + 邊 */
.nexa-auth-btn.nexa-auth-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #ededee;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.nexa-auth-btn.nexa-auth-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.nexa-auth-status { margin-top: 14px; font-size: 12.5px; color: #ff7878; min-height: 16px; line-height: 1.5; }
.nexa-auth-status.success { color: #6dde8a; }

/* Trust strip — 「為什麼可以放心登入」三點，Linear / Vercel 都這個 pattern */
.nexa-auth-trust {
  display: flex; justify-content: space-around; gap: 12px;
  margin: 24px 0 4px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nexa-auth-trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; color: #8a8a92; line-height: 1.3;
}
.nexa-auth-trust-icon { font-size: 16px; opacity: .9; }

.nexa-auth-foot { margin-top: 16px; font-size: 11px; color: #6a6a72; line-height: 1.6; }
.nexa-auth-foot a { color: #9a9a9f; }

@media (max-width: 480px) {
  .nexa-auth-card { padding: 32px 24px 24px; border-radius: 16px; }
  .nexa-auth-mark { width: 60px; height: 60px; }
  .nexa-auth-brand { font-size: 22px; }
  .nexa-auth-trust-item { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .nexa-auth-mesh::before, .nexa-auth-mesh::after, .nexa-auth-mesh > span { animation: none !important; }
}
/* ─── User avatar dropdown — ChatGPT/Linear/Notion 同款 pattern ─── */
/* 跟功能 icons 之間的細直線分隔（Linear/GitHub 都這樣處理 personal anchor）*/
.tb-divider {
  display: none;
  width: 1px; height: 18px;
  background: rgba(255,255,255,.1);
  margin: 0 4px 0 6px;
  align-self: center;
}
body.nexa-authed .tb-divider { display: inline-block; }

.nexa-user-btn {
  display: none !important;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0; border: 1.5px solid transparent;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b6cff 0%, #8a4fff 100%);
  color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.nexa-authed .nexa-user-btn { display: inline-flex !important; }
.nexa-user-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(91,108,255,.45); border-color: rgba(255,255,255,.15); }
.nexa-user-btn:active { transform: translateY(0); }
.nexa-user-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nexa-user-btn .nexa-user-initial { font-size: 13px; line-height: 1; }
/* Mobile：縮回 28px，省 titlebar 空間 */
@media (max-width: 760px) {
  .nexa-user-btn { width: 28px; height: 28px; }
  .nexa-user-btn .nexa-user-initial { font-size: 12px; }
  .tb-divider { display: none !important; }
}

/* dropdown panel */
.nexa-user-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 240px; padding: 6px 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
  z-index: 1000;
}
.nexa-user-menu-head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.nexa-user-menu-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.nexa-user-menu-email { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nexa-user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 16px;
  background: none; border: none;
  color: var(--text-primary); font-size: 13px; text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.nexa-user-menu-item:hover { background: rgba(255,255,255,.05); }
.nexa-user-menu-item--danger { color: #ff6b6b; }
.nexa-user-menu-item--danger:hover { background: rgba(255,107,107,.08); }
.nexa-user-menu-icon { width: 16px; flex-shrink: 0; opacity: .8; }
.nexa-user-menu-divider { height: 1px; margin: 4px 0; background: var(--border-subtle); }

/* mobile — sheet from bottom */
@media (max-width: 760px) {
  .nexa-user-menu {
    position: fixed; top: auto; right: 0; left: 0; bottom: 0;
    min-width: 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    animation: nexaSheetUp .2s ease-out;
  }
  .nexa-user-menu-item { padding: 14px 18px; font-size: 14px; }
  .nexa-user-menu-head { padding: 16px 18px 14px; }
}
@keyframes nexaSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.nexa-user-backdrop {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.3);
}
@media (min-width: 761px) { .nexa-user-backdrop { display: none; } }