/* ==========================================================================
 * 守备医疗人生 - assets/css/polish.css
 * 视觉抛光层（独立于 style.css，可整体移除而不影响功能逻辑）：
 *   1. 扩展医疗主题色（青 / 暖金 / 渐变）
 *   2. 全局纵深背景（径向渐变 + 极淡网格微动）
 *   3. 封面阶段：全屏铺满、动态病房背景、心电条、角色展示、辉光
 *   4. 微动效：卡片入场、按钮辉光、标签滑动、生命体征呼吸、弹窗过渡
 * 说明：所有动画默认只跑一次或用无限循环的环境动效，不阻塞任何操作。
 * ========================================================================== */

:root {
  --accent-3: #3ad6c4;          /* 青绿：护士 / 生命支持点缀 */
  --accent-warm: #e7a94a;       /* 暖金：引语 / 成就点缀 */
  --accent-violet: #8f7fd6;     /* 淡紫：心态 / 药理点缀 */
  --grid-line: rgba(120, 152, 184, .045);
  --cover-glow: rgba(58, 214, 196, .14);
}

/* 首屏载入标记（JS 起来前的那一下）也带点呼吸，别是死画面 */
.boot-loading-mark { animation: bootPulse 1.7s ease-in-out infinite; border-radius: 8px; }
@keyframes bootPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,143,208,0); }
  50%      { box-shadow: 0 0 0 7px rgba(47,143,208,.14); }
}

/* ---------------- 全局纵深背景 ---------------- */
html, body {
  background:
    radial-gradient(1200px 720px at 50% -12%, #16242f 0%, #0e1319 52%, #0a0e13 100%) fixed;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
  animation: gridDrift 26s linear infinite;
}
#app { position: relative; z-index: 1; }

@keyframes gridDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 42px 42px, 42px 42px; }
}

/* ---------------- 卡片 / 场景：轻量入场与悬浮 ---------------- */
.anim-rise { animation: riseIn .34s cubic-bezier(.2,.7,.3,1) both; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scene { animation: riseIn .3s ease both; }
.v-card { transition: border-color .15s, box-shadow .15s, transform .15s; }
.v-card:hover { border-color: var(--line-2); box-shadow: 0 6px 22px rgba(0,0,0,.28); }

/* 卡片标题左侧强调条换成渐变，增加一点层次 */
.v-card-title::before { background: linear-gradient(180deg, var(--accent-2), var(--accent-3)); }
/* 卡片头加一层极淡的蓝→青渐变，打破整片同色的灰蓝 */
.v-card-head { background-image: linear-gradient(90deg, rgba(47,143,208,.09), rgba(58,214,196,.035) 58%, rgba(0,0,0,0)); }
/* 顶栏底缘一条青色微光，和封面呼应 */
.v-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(58,214,196,.32), transparent);
  pointer-events: none;
}

/* ---------------- 按钮：辉光与流动渐变 ---------------- */
.v-btn { transition: background .14s, border-color .14s, box-shadow .14s, transform .06s; }
.v-btn:hover { box-shadow: 0 0 0 1px rgba(47,143,208,.35), 0 4px 16px rgba(47,143,208,.18); }
.v-btn.primary {
  background: linear-gradient(120deg, #1d4a70, #2f8fd0 55%, #3ad6c4);
  background-size: 200% 100%;
  border-color: transparent; color: #f2fbff;
  animation: btnFlow 6s ease infinite;
}
.v-btn.primary:hover { box-shadow: 0 6px 22px rgba(47,143,208,.4); }
@keyframes btnFlow {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* ---------------- 标签页：活动下划线滑动 ---------------- */
.pw-tab { position: relative; transition: color .15s, background .15s; }
.pw-tab.active { color: #eaf6ff; }
.pw-tab.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
  border-radius: 2px; animation: tabIn .25s ease both;
}
@keyframes tabIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ---------------- 生命体征瓦片：呼吸 ---------------- */
.vtile.crit { animation: vitalBreath 1.6s ease-in-out infinite; }
@keyframes vitalBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,100,79,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(224,100,79,.18); }
}

/* 当前病人卡：头像 + 属性表并排，表格 min-width:0 防止把面板撑宽 */
.v-patient-id { display: flex; gap: 12px; align-items: flex-start; }
.v-patient-ava { width: 62px; height: 74px; flex: 0 0 auto; }
.v-patient-ava .art-avatar { border-radius: 10px; }
.v-patient-id .v-kv { flex: 1 1 auto; min-width: 0; }

/* ---------------- 通用 2D 头像框 ---------------- */
.art-avatar {
  width: 100%; height: 100%; display: block; border-radius: 14px;
  background: #0d141b; border: 1px solid var(--line-2);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(58,214,196,.08);
  object-fit: cover; object-position: center 24%;
  filter: saturate(.97) contrast(1.05);
}

/* ==========================================================================
 * 封面阶段（phase-cover）：全屏铺满，隐藏三栏空面板
 * ========================================================================== */
body.phase-cover #topbar,
body.phase-cover #left,
body.phase-cover #right,
body.phase-cover #statusbar { display: none !important; }
body.phase-cover #main { display: block; padding: 0; gap: 0; }
body.phase-cover #center { padding: 0; }

.boot-page {
  position: relative; min-height: 100vh; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px 36px;
  overflow-x: hidden; overflow-y: auto;   /* 内容比视口高时手机端可滚动，不再被裁掉 */
  background: linear-gradient(180deg, #0c141c, #0a0f15);
  /* 封面本身不做透明度入场：首屏要在第一帧就完整可读；
     动感交给心电条、浮动角色与标题辉光（都是无限循环、不改整体透明度）。 */
}

/* 封面主视觉铺底：用 img + object-fit:cover 裁切，避免内联 SVG 的 slice 把
   内部几何撑出视口（会被布局体检误判为横向溢出）。 */
.boot-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.boot-bg-img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 26%;
  transform: scale(1.03);
  filter: blur(1px) saturate(1.04) brightness(.85);
}
.boot-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,13,19,.28) 0%, rgba(8,13,19,.58) 46%, rgba(8,13,19,.94) 100%);
}

/* ---------- 桌面端：左文右图，像一张正式主视觉海报 ---------- */
@media (min-width: 900px) {
  .boot-page { align-items: flex-start; padding: 40px 0 36px 6vw; }
  /* 全幅铺底：封面本身已经把人物放在右侧、左侧留了暗部，这里只需再压一点
     左侧渐变保证标题对比度，不要裁掉右半边的构图。 */
  .boot-bg { left: 0; right: 0; width: auto; }
  .boot-bg-img {
    object-position: center 22%;
    filter: blur(.4px) saturate(1.05) brightness(.98);
  }
  .boot-bg::after {
    background:
      linear-gradient(90deg, rgba(8,13,19,.74) 0%, rgba(8,13,19,.52) 30%, rgba(8,13,19,.12) 58%, rgba(8,13,19,0) 78%),
      linear-gradient(180deg, rgba(8,13,19,.22) 0%, rgba(8,13,19,0) 46%, rgba(8,13,19,.74) 100%);
  }
  .boot-inner { max-width: 620px; align-items: flex-start; }
  .boot-hero { align-items: flex-start; text-align: left; }
  .boot-quote { margin: 4px 0 0; }
  .boot-cast, .boot-actions, .boot-foot { justify-content: flex-start; }
}

.boot-inner {
  position: relative; z-index: 2; width: 100%; max-width: 980px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}

/* 顶部动态心电条 */
.boot-ecg { width: min(720px, 92%); height: 56px; opacity: .9; filter: drop-shadow(0 0 8px var(--cover-glow)); }
.ecg-svg, .boot-ecg svg { width: 100%; height: 100%; display: block; }
.boot-ecg .ecg-line { filter: drop-shadow(0 0 4px rgba(58,214,196,.7)); }

/* 徽标：旋转光环 + 十字 */
.boot-emblem {
  width: 76px; height: 76px; margin-bottom: 2px;
  display: grid; place-items: center; color: var(--accent-3);
  animation: spinSlow 14s linear infinite;
}
.boot-emblem svg { width: 100%; height: 100%; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.boot-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.boot-title {
  margin: 0; font-size: clamp(34px, 6vw, 58px); font-weight: 800; letter-spacing: 6px;
  background: linear-gradient(90deg, #eaf6ff 0%, #7fd9ff 45%, #3ad6c4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(58,214,196,.25);
  animation: titleGlow 5s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(58,214,196,.15)); }
  50%      { filter: drop-shadow(0 0 22px rgba(58,214,196,.35)); }
}
/* 万一浏览器不支持 background-clip:text，标题不能变成透明看不见 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .boot-title { color: var(--text); background: none; }
}
.boot-en { font-size: 12px; letter-spacing: 7px; color: var(--muted); margin-top: -4px; }
.boot-tagline { color: var(--text-2); font-size: 14px; letter-spacing: .5px; max-width: 640px; }
.boot-quote {
  color: var(--accent-warm); font-size: 13px; font-style: italic; opacity: .85;
  border-left: 2px solid rgba(231,169,74,.4); padding-left: 12px; margin: 4px auto 0;
}

/* 角色展示：医生 / 护士 / 病人 / 主任 */
.boot-cast { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.cast-card {
  width: 132px; padding: 14px 10px 12px; text-align: center;
  background: rgba(21,28,36,.72); border: 1px solid var(--line);
  border-radius: 14px; backdrop-filter: blur(2px);
  transition: transform .18s, border-color .18s, box-shadow .18s;
  animation: castFloat 5.5s ease-in-out infinite;
}
.cast-card:nth-child(2) { animation-delay: .6s; }
.cast-card:nth-child(3) { animation-delay: 1.2s; }
.cast-card:nth-child(4) { animation-delay: 1.8s; }
.cast-card:hover { transform: translateY(-6px); border-color: var(--accent-3); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
@keyframes castFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.cast-ava { width: 84px; height: 98px; margin: 0 auto 8px; }
.cast-name { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 1px; }
.cast-role { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cast-card.doctor .cast-role { color: var(--accent-2); }
.cast-card.nurse  .cast-role { color: var(--accent-3); }
.cast-card.chief  .cast-role { color: var(--gold); }

/* 按钮组 */
.boot-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.boot-actions .v-btn { min-width: 132px; justify-content: center; }

/* 底栏信息 */
.boot-foot {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  color: var(--muted); font-size: 12px; margin-top: 6px;
}
.boot-foot-item { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(13,20,27,.6); }

/* ==========================================================================
 * 打断卡（护士催促 / 上级查房）：加入人物头像，让病区有"人"
 * ========================================================================== */
.pw-itx-head { display: flex; align-items: center; gap: 12px; }
.pw-itx-ava { width: 46px; height: 54px; flex: 0 0 auto; }
.pw-itx-ava .art-avatar { border-radius: 10px; }
.pw-itx-headtext { display: flex; flex-direction: column; gap: 2px; }
.pw-itx-card { animation: riseIn .3s ease both; }

/* ---------------- 弹窗 / 提示：更顺滑 ---------------- */
.v-modal { animation: riseIn .22s ease both; }
.v-overlay { animation: fadeIn .2s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.toast { animation: toastIn .26s cubic-bezier(.2,.8,.3,1) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------- 尊重「减少动态效果」系统偏好 ---------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
 * 移动端封面：上图下文。照片做成顶部横幅，正文在下方深色区滚动，
 * 不会再出现"角色卡第二排/按钮被 overflow:hidden 裁掉"的问题。
 * ========================================================================== */
@media (max-width: 899px) {
  .boot-page { justify-content: flex-start; align-items: stretch; padding: 0 0 30px; }
  .boot-bg { position: relative; inset: auto; width: 100%; height: 32vh; min-height: 240px; }
  .boot-bg-img { object-position: center 16%; transform: none; filter: brightness(.92) saturate(1.04); }
  .boot-bg::after {
    background: linear-gradient(180deg, rgba(10,15,21,0) 26%, rgba(10,15,21,.50) 66%, #0a0f15 100%);
  }
  .boot-inner { padding: 0 18px; margin-top: -56px; gap: 16px; }
  .boot-ecg { height: 40px; }
  .boot-emblem { width: 56px; height: 56px; }
  .boot-title { letter-spacing: 3px; }
  .boot-cast { gap: 12px; width: 100%; }
  .cast-card { width: calc(50% - 6px); max-width: 168px; }
  .boot-actions { width: 100%; flex-direction: column; }
  .boot-actions .v-btn { width: 100%; }
  .boot-foot { gap: 8px; padding: 0 18px; }
  .boot-foot-item { font-size: 11px; }
}