/* ============================================================
   玩客云聊天服务器 · 主题美化
   风格：Blue Archive 设计语言（冷蓝 / 纯白 / 锐角几何）
        + 猫羽雫 配色点缀（薰衣草紫 / 樱粉）
   ------------------------------------------------------------
   安装位置：/opt/vocechat/data/wwwroot/static/theme/theme.css
   图片槽位：/opt/vocechat/data/wwwroot/static/theme/
   ============================================================ */

/* ---------- 1. 主题调色板 ---------- */
:root {
  --ba-25:  #f7faff;
  --ba-50:  #eef5ff;
  --ba-100: #dbe9ff;
  --ba-300: #9cc7ff;
  --ba-400: #5aa6ff;
  --ba-500: #128afa;
  --ba-600: #0b6bcb;
  --ba-700: #0a549e;

  --shizuku-purple: #8b6fd4;
  --shizuku-pink:   #f2a0c0;
  --shizuku-lilac:  #c9b6f0;

  --theme-radius: 14px;

  /* 图片槽位：把同名文件丢进 static/theme/ 即可自动生效 */
  --theme-bg:    url("/static/theme/bg.png?v=bootstrap");
  --theme-char:  url("/static/theme/character.png?v=bootstrap");
  --theme-logo:  url("/static/theme/logo.png");
}

/* ---------- 2. 字体 ---------- */
html, body, #root, button, input, textarea, select {
  font-family: "HarmonyOS Sans SC", "MiSans", "PingFang SC",
               "Microsoft YaHei", system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3. 品牌色阶整体替换（蓝 → Blue Archive 蓝）---------- */
.bg-primary-25  { background-color: var(--ba-25)  !important; }
.bg-primary-50  { background-color: var(--ba-50)  !important; }
.bg-primary-100 { background-color: var(--ba-100) !important; }
.bg-primary-300 { background-color: var(--ba-300) !important; }
.bg-primary-400 { background-color: var(--ba-400) !important; }
.bg-primary-500 { background-color: var(--ba-500) !important; }
.bg-primary-700 { background-color: var(--ba-700) !important; }

.text-primary-400 { color: var(--ba-400) !important; }
.text-primary-500 { color: var(--ba-500) !important; }
.text-primary-600 { color: var(--ba-600) !important; }
.text-primary-700 { color: var(--ba-700) !important; }

.border-primary-300 { border-color: var(--ba-300) !important; }
.border-primary-400 { border-color: var(--ba-400) !important; }
.border-primary-500 { border-color: var(--ba-500) !important; }

.bg-primary-500\/10 { background-color: rgb(18 138 250 / .10) !important; }
.bg-primary-50\/80  { background-color: rgb(238 245 255 / .80) !important; }
.to-primary-400     { --tw-gradient-to: var(--ba-400) !important; }

/* ---------- 4. 全局背景（Blue Archive 冷蓝渐变）----------
   ⚠️ 必须挂在 html 上，不能挂在 body 上。
   VoceChat 的应用容器自带不透明底色，挂在 body 上会被完全盖住。 */
html {
  background:
    radial-gradient(1200px 700px at 12% -8%,  rgb(18 138 250 / .16), transparent 62%),
    radial-gradient(900px 600px at 92% 6%,    rgb(139 111 212 / .14), transparent 60%),
    radial-gradient(800px 800px at 50% 112%,  rgb(242 160 192 / .12), transparent 62%),
    linear-gradient(168deg, #f4f8ff 0%, #eaf2ff 52%, #f6f2ff 100%) !important;
  background-attachment: fixed !important;
  min-height: 100%;
}

body { background: transparent !important; }

/* 背景大图：加高斯模糊 + 轻微放大（消除模糊边缘），文件不存在时静默不显示 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--theme-bg);
  background-size: cover;
  background-position: center;
  opacity: .30;
  filter: blur(26px) saturate(115%);
  transform: scale(1.14);
}

/* ---------- 5. 暗色模式 ---------- */
html.dark {
  background:
    radial-gradient(1200px 700px at 12% -8%,  rgb(18 138 250 / .22), transparent 62%),
    radial-gradient(900px 600px at 92% 6%,    rgb(139 111 212 / .20), transparent 60%),
    radial-gradient(800px 800px at 50% 112%,  rgb(242 160 192 / .12), transparent 62%),
    linear-gradient(168deg, #0d1526 0%, #111b31 55%, #161229 100%) !important;
  background-attachment: fixed !important;
}

html.dark body::before { opacity: .16; }

/* ---------- 6. 让应用外壳透明 + 面板改磨砂玻璃 ----------
   ★ 这是主题能否显示的关键。
   VoceChat 的根容器与白色面板都是不透明底色，
   不放它们透出来，渐变背景和立绘会被全部盖住。 */
#root,
#root > div,
#root > div > div {
  background-color: transparent !important;
}

/* 层级修正：把整个应用抬到背景装饰层之上。
   否则 body::before（模糊背景，fixed+z0）会盖在
   聊天里非定位元素（典型：消息图片）之上，图会发灰发雾。 */
#root {
  position: relative;
  z-index: 1;
}

.bg-white    { background-color: rgba(255,255,255,.80) !important; }
.bg-gray-50  { background-color: rgba(249,250,251,.72) !important; }
.bg-gray-100 { background-color: rgba(243,244,246,.72) !important; }
.bg-gray-200 { background-color: rgba(229,231,235,.72) !important; }

html.dark .bg-dark-900 { background-color: rgba(13,21,38,.78) !important; }
html.dark .bg-dark-800 { background-color: rgba(23,26,33,.78) !important; }
html.dark .bg-dark-700 { background-color: rgba(30,34,43,.78) !important; }

.bg-white, .bg-gray-50, .bg-gray-100 {
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}

/* ---------- 7. 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ba-400), var(--shizuku-purple));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--ba-500), var(--shizuku-purple));
  background-clip: content-box;
}
html.dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ba-500), var(--shizuku-purple));
  background-clip: content-box;
}

/* ---------- 8. 圆角统一 ---------- */
.rounded-md  { border-radius: calc(var(--theme-radius) - 6px) !important; }
.rounded-lg  { border-radius: calc(var(--theme-radius) - 2px) !important; }
.rounded-xl  { border-radius: var(--theme-radius) !important; }
.rounded-2xl { border-radius: calc(var(--theme-radius) + 4px) !important; }

/* ---------- 9. 按钮：主色渐变 + 悬浮微抬 ---------- */
button.bg-primary-500,
.bg-primary-500.hover\:bg-primary-400:hover {
  background-image: linear-gradient(135deg, var(--ba-500) 0%, var(--shizuku-purple) 130%) !important;
  transition: transform .16s ease, box-shadow .16s ease;
}
button.bg-primary-500:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(18 138 250 / .32);
}
button.bg-primary-500:active { transform: translateY(0); }

/* ---------- 10. 选中文字 ---------- */
::selection {
  background: rgb(18 138 250 / .26);
  color: inherit;
}

/* ---------- 11. 焦点环 ---------- */
:focus-visible {
  outline: 2px solid var(--ba-500) !important;
  outline-offset: 2px !important;
}

/* ---------- 12. 链接 ---------- */
a { color: var(--ba-600); }
a:hover { color: var(--ba-500); }

/* ---------- 13. 角色立绘（登录页 / 主界面统一管理）----------
   注意：.guest-container / .login-container 只存在于未登录界面；
   聊天页没有这两个类名，所以必须单独给 #root 挂一份。
   两者都要有，缺一个就会在某一边看不到立绘。 */

/* 未登录界面：完整立绘 */
.guest-container::after,
.login-container::after {
  content: "";
  position: fixed;
  right: 0;
  bottom: 0;
  width: min(58vw, 820px);
  height: min(82vh, 660px);
  background-image: var(--theme-char);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  pointer-events: none;
  z-index: 1;
  opacity: .96;
  filter: drop-shadow(-14px 0 32px rgb(18 138 250 / .22));
}

/* 主界面：水印式，压低不透明度避免遮挡聊天内容 */
#root::after {
  content: "";
  position: fixed;
  right: 0;
  bottom: 0;
  width: min(34vw, 420px);
  height: min(68vh, 620px);
  background-image: var(--theme-char);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  pointer-events: none;
  z-index: -1; /* 藏到聊天内容后面（#root 现在是 stacking context） */
  opacity: .30;
  filter: drop-shadow(-10px 0 26px rgb(18 138 250 / .18));
}

/* ---------- 13b. 窄屏保护（重要）----------
   手机屏幕窄，立绘会被挤到最底部、和底部导航栏重叠，
   既挡住内容又难看。窄屏和矮屏一律不显示立绘。
   阈值取 900px 是为了同时覆盖平板竖屏。 */
@media (max-width: 900px), (max-height: 560px) {
  .guest-container::after,
  .login-container::after,
  #root::after {
    display: none !important;
  }
}

/* ---------- 14. 顶部品牌条（Blue Archive 式斜切装饰）---------- */
.ba-accent-bar {
  position: relative;
  overflow: hidden;
}
.ba-accent-bar::after {
  content: "";
  position: absolute;
  top: 0; right: -28px;
  width: 160px; height: 100%;
  background: linear-gradient(135deg, transparent 42%, rgb(18 138 250 / .18) 42%, rgb(18 138 250 / .18) 58%, transparent 58%);
  pointer-events: none;
}

/* ---------- 15. 动效偏好 ---------- */
/* ---------- 16. 注册 / 邀请页：与公共落地页统一 ---------- */
html.theme-register {
  min-height: 100%;
  background:
    radial-gradient(900px 580px at 12% 10%, rgb(18 138 250 / .18), transparent 62%),
    radial-gradient(760px 520px at 92% 12%, rgb(139 111 212 / .16), transparent 60%),
    radial-gradient(680px 620px at 48% 112%, rgb(242 160 192 / .12), transparent 62%),
    linear-gradient(155deg, #f4f8ff 0%, #eaf2ff 54%, #f7f3ff 100%) !important;
}

html.theme-register body,
html.theme-register #root,
html.theme-register #root > div {
  background: transparent !important;
}

html.theme-register .theme-register-screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 16px;
  position: relative;
  isolation: isolate;
}

html.theme-register .theme-register-card {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(24px, 5vw, 40px) !important;
  border: 1px solid rgb(18 138 250 / .18) !important;
  border-radius: 22px !important;
  background: rgb(255 255 255 / .86) !important;
  box-shadow: 0 22px 70px rgb(18 83 153 / .14), 0 2px 8px rgb(14 26 43 / .05) !important;
  backdrop-filter: saturate(155%) blur(18px);
  -webkit-backdrop-filter: saturate(155%) blur(18px);
  position: relative;
  z-index: 2;
}

html.theme-register .theme-register-heading {
  width: 100%;
  align-items: stretch;
  gap: 0;
  padding-bottom: 20px;
}

html.theme-register .theme-invite-kicker {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 7px;
  margin: 0 auto 14px;
  padding: 6px 12px;
  border: 1px solid rgb(18 138 250 / .14);
  border-radius: 999px;
  background: rgb(18 138 250 / .08);
  color: #0b6bcb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

html.theme-register .theme-invite-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #128afa, #8b6fd4);
  box-shadow: 0 0 0 3px rgb(18 138 250 / .10);
}

html.theme-invite-expired .theme-invite-kicker {
  border-color: rgb(217 119 6 / .22);
  background: rgb(245 158 11 / .10);
  color: #a16207;
}

html.theme-invite-expired .theme-invite-kicker::before {
  background: #d97706;
  box-shadow: 0 0 0 3px rgb(217 119 6 / .10);
}

html.theme-invite-expired .theme-invite-subtitle { color: #8a5b18; }
html.theme-invite-expired .theme-register-heading > p.text-gray-400.mb-6 { display: none !important; }

html.theme-register .theme-register-heading h1,
html.theme-register .theme-register-heading h2,
html.theme-register .theme-register-heading h3,
html.theme-register .theme-register-heading > .font-bold.text-3xl {
  margin: 0;
  color: #111827 !important;
  font-size: clamp(23px, 5vw, 29px) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
  line-height: 1.2;
}

html.theme-register .theme-invite-subtitle {
  margin: 9px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

html.theme-register .theme-register-card input {
  min-height: 46px;
  border-radius: 10px !important;
  border-color: #dbe6f5 !important;
  background: rgb(255 255 255 / .78) !important;
  box-shadow: 0 1px 2px rgb(14 26 43 / .03) !important;
  color: #172033 !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

html.theme-register .theme-register-card input:focus {
  border-color: #5aa6ff !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgb(18 138 250 / .12) !important;
}

html.theme-register .theme-register-card input::placeholder {
  color: #8b98ab !important;
}

html.theme-register .theme-register-card button[type="submit"],
html.theme-register .theme-register-card form button {
  min-height: 48px;
  border: 0 !important;
  border-radius: 11px !important;
  background: linear-gradient(120deg, #128afa, #5a8dec 62%, #8b6fd4) !important;
  color: #fff !important;
  font-weight: 650 !important;
  box-shadow: 0 7px 18px rgb(18 138 250 / .24) !important;
  transition: transform .16s ease, box-shadow .16s ease;
}

html.theme-register .theme-register-card button[type="submit"]:hover,
html.theme-register .theme-register-card form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgb(18 138 250 / .32) !important;
}

html.theme-register .theme-register-card a {
  color: #0b6bcb !important;
  font-weight: 600;
}

html.theme-register #root > button {
  z-index: 20;
  border-radius: 10px !important;
  border-color: rgb(18 138 250 / .18) !important;
  background: rgb(255 255 255 / .72) !important;
  color: #0b6bcb !important;
  backdrop-filter: blur(10px);
}

html.dark.theme-register {
  background:
    radial-gradient(900px 580px at 12% 10%, rgb(18 138 250 / .24), transparent 62%),
    radial-gradient(760px 520px at 92% 12%, rgb(139 111 212 / .20), transparent 60%),
    linear-gradient(155deg, #0d1526 0%, #111b31 56%, #17142a 100%) !important;
}

html.dark.theme-register .theme-register-card {
  border-color: rgb(90 166 255 / .22) !important;
  background: rgb(18 28 47 / .84) !important;
}

html.dark.theme-register .theme-register-heading h1,
html.dark.theme-register .theme-register-heading h2,
html.dark.theme-register .theme-register-heading h3,
html.dark.theme-register .theme-register-heading > .font-bold.text-3xl {
  color: #edf4ff !important;
}

html.dark.theme-register .theme-invite-subtitle { color: #a7b5ca; }

html.dark.theme-register .theme-invite-kicker {
  border-color: rgb(90 166 255 / .20);
  background: rgb(18 138 250 / .14);
  color: #9cc7ff;
}

html.dark.theme-invite-expired .theme-invite-kicker {
  border-color: rgb(251 191 36 / .24);
  background: rgb(251 191 36 / .12);
  color: #fcd34d;
}

html.dark.theme-invite-expired .theme-invite-kicker::before { background: #fbbf24; }
html.dark.theme-invite-expired .theme-invite-subtitle { color: #e8c77b; }

html.dark.theme-register .theme-register-card input {
  border-color: rgb(148 163 184 / .28) !important;
  background: rgb(15 23 42 / .60) !important;
  color: #edf4ff !important;
}

@media (max-width: 520px) {
  html.theme-register .theme-register-screen { padding: 14px 10px; }
  html.theme-register .theme-register-card {
    width: min(100%, 440px);
    max-height: calc(100dvh - 28px);
    padding: 24px 20px !important;
    border-radius: 18px !important;
  }
  html.theme-register .theme-register-heading { padding-bottom: 16px; }
}

@media (max-height: 560px) {
  html.theme-register .theme-register-screen { padding-top: 8px; padding-bottom: 8px; }
  html.theme-register .theme-register-card { padding: 14px 28px !important; }
  html.theme-register .theme-register-heading { padding-bottom: 8px; }
  html.theme-register .theme-invite-kicker { margin-bottom: 6px; padding: 4px 10px; }
  html.theme-register .theme-invite-subtitle { margin-top: 4px; font-size: 12px; }
  html.theme-register .theme-register-card form { gap: 10px !important; }
  html.theme-register .theme-register-card input { min-height: 38px; padding-top: 7px !important; padding-bottom: 7px !important; }
  html.theme-register .theme-register-card button[type="submit"],
  html.theme-register .theme-register-card form button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}