/* ============================================================
 * Klippe 行人统计 — 面板 / 列表 / 进度条(主界面 + EasyView 共用)
 * 面板:移动端 = 底部抽屉(开=ease-out 减速,关=ease-in 加速飞出;可拖动调高);
 *       桌面   = 文档流内向下展开(粘连式),最大 65vh 内部滚动。
 * ============================================================ */

.ev-panel {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
}
/* 移动端抽屉打开时锁页面滚动(防串到主页面) */
body.klp-drawer-open { overflow: hidden; }
/* 移动端:底部抽屉(高度由 JS 卡到时间线上边缘),只留上边框 */
@media (max-width: 767px) {
  .ev-panel {
    left: 0;
    right: 0;
    bottom: 0;
    height: 45vh;
    max-height: 92vh;
    border: 0;
    border-top: 1px solid var(--skarn-border);
    transform: translateY(102%);
    overscroll-behavior: contain;
    transition: transform 560ms cubic-bezier(0.22, 1.2, 0.32, 1);   /* 慢而轻的细微回弹(SwiftUI 风) */
  }
  .ev-panel.is-open { transform: translateY(0); }
  .ev-panel.is-closing {
    transform: translateY(102%);
    transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);   /* ease-in 加速飞出 */
  }
}
/* 桌面:文档流内向下展开(与行人卡粘连),高度 = 页面 50% 内部滚动 */
@media (min-width: 768px) {
  .ev-panel {
    position: static;
    display: none;
    width: auto;
    transform: none;
    transition: none;
    height: 50vh;             /* 固定页面 50% 高 */
    max-height: 50vh;
    border: 1px solid var(--skarn-border);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
    margin-top: 0;              /* 与上方行人卡粘连 */
  }
  .ev-panel.is-open { display: flex; }
  .ev-panel__grip { display: none; }
}

/* 头部:移动端 = 控制柄 + 标题 + 过滤/关闭按钮 同一行 */
.ev-panel__head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--skarn-border);
  min-height: 42px;
}
@media (max-width: 767px) {
  .ev-panel__head {
    min-height: 48px;             /* 与对讲卡片同高 */
    padding: 6px;                 /* 上下左右边距一致(6px) */
    gap: 6px;                     /* 两按钮间距 = 关闭按钮右边缘 */
  }
  .ev-panel__grip {
    position: absolute;           /* 横向居中;上端对齐按钮上端 */
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    width: 40px;                  /* 触控区 */
    height: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    cursor: ns-resize;
    touch-action: none;
    z-index: 2;
  }
  .ev-panel__grip::before {
    content: "";
    width: 30px;                  /* 横向小横条(不是竖的) */
    height: 4px;
    background: var(--skarn-text-muted);
    opacity: 0.5;
  }
  /* 更高特异性覆盖后面的基础规则;标题左边距 = 上下边距(垂直居中),与按钮同呼吸 */
  .ev-panel__head .ev-panel__title { flex: 1 1 auto; text-align: left; font-size: 1.25rem; margin-left: 14px; }
  .ev-panel__head .ev-panel__btn { width: 2.25rem; height: 2.25rem; }   /* 与对讲音量按钮同大 */
}
.ev-panel__title {
  flex: 1 1 auto;
  font-family: "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", var(--klippe-serif, serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--skarn-text-main);
  white-space: nowrap;
}
.ev-panel__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background: transparent;
  color: var(--skarn-text-muted);
  cursor: pointer;
  transition: var(--skarn-transition);
}
.ev-panel__btn:hover { color: var(--skarn-text-main); border-color: var(--skarn-text-muted); }
.ev-panel__btn .sk-ico { width: 1.1em; height: 1.1em; }
.ev-panel__btn.is-on {
  border-color: var(--skarn-warning);
  background: var(--skarn-warning);
  color: var(--skarn-on-primary);
}
.ev-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;      /* iOS:列表滚动到头不串到下面主页面 */
  -webkit-overflow-scrolling: touch;
  padding: 10px;                     /* 桌面:不留底部占位 */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 767px) {
  .ev-panel__body { padding: 10px 10px 72px; }   /* 移动端底部留一条目空白(大 R 角屏) */
}

/* Skarn 加载动画占位 */
.ev-prow-load {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

/* -------------------------------------------------- 行人行 */
.ev-prow {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background: var(--skarn-surface);
  cursor: pointer;
  user-select: none;
  transition: var(--skarn-transition);
}
.ev-prow:hover { border-color: var(--skarn-primary, #22538F); }
/* 当前播放时间落在该次经过内 → 方框描边主色加粗 */
.ev-prow.is-active {
  border: 2px solid var(--skarn-primary, #22538F);
  box-shadow: 0 0 0 1px var(--skarn-primary, #22538F);
  padding: 5px 7px;
}
.ev-prow__t {
  flex: none;
  font-family: "Inter TNUM", "JetBrains Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--skarn-text-muted);
  white-space: nowrap;
}
.ev-prow__end { font-weight: 400; }
.ev-prow__barwrap {
  flex: 1 1 auto;
  min-width: 48px;
  height: 24px;
  display: flex;
  align-items: center;
}
.ev-prow__bar {
  position: relative;
  height: 22px;
  min-width: 6px;
  max-width: 100%;
}
.ev-prow__cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ev-pempty {
  padding: 18px 8px;
  text-align: center;
  color: var(--skarn-text-muted);
  font-size: 0.85rem;
}

/* 告警:30-60s 左右文字都黄;60s+ 左右文字都红 */
.ev-prow.is-alert .ev-prow__t { color: var(--skarn-warning); }
.ev-prow.is-red .ev-prow__t { color: var(--skarn-danger); }