/* Figma 设计规范：Gray/100 #F2F4F7, Gray/200 #EAECF0, Gray/700 #344054, Orange #FF692E, Orange/50 #FFF4ED, Text #333 */

.pisell-time-navigator {
  position: relative;
  width: 100%;
  min-width: 0; /* 在 flex 布局中允许收缩 */
  background: #fff;
  // border: 1px solid #f2f4f7;

  /* 视口包裹层：限制宽度/高度，内部轴可滚动 */

  .pisell-time-navigator-viewport-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
  }

  /** 包裹 ScrollView；锁定交互时整块不响应指针，避免拖轴改时间 */

  .pisell-time-navigator-scroll-host {
    width: 100%;
    min-width: 0;
  }

  .pisell-time-navigator-scroll-host--interaction-locked {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .pisell-time-navigator-cursor-fixed {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pisell-time-navigator-cursor-fixed--horizontal {
    justify-content: center;
  }

  .pisell-time-navigator-cursor-fixed--vertical {
    align-items: center;
  }

  &--horizontal {
    .pisell-time-navigator-axis {
      flex-direction: row;
    }

    .pisell-time-navigator-now {
      position: absolute;
      right: 0;
      top: 2px;
    }
  }

  &--vertical {
    /* flex 子项内竖向轴须 min-height:0 + overflow，否则轴随内容无限增高、无法内部滚动 */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;

    .pisell-time-navigator-viewport-wrap {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .pisell-time-navigator-scroll-host {
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .pisell-time-navigator-axis {
      flex-direction: column;
    }

    .pisell-time-navigator-now {
      position: absolute;
      left: 3px;
      bottom: 4px;
      width: 48px;
      flex-direction: column;
    }
  }
}

/* 轴包裹层：左右/上下各留半屏空白，便于把 0 和 24 点拖到中心 */
.pisell-time-navigator-axis-wrap {
  position: relative;
  flex-shrink: 0;
}

/* 横向：当前时间渐变块，宽度由 TS 的 CURRENT_TIME_GRADIENT_WIDTH_H_PX 决定，在时间轴背后 */
.pisell-time-navigator-current-gradient {
  position: absolute;
  z-index: 0;
  pointer-events: none;

  &--horizontal {
    background: linear-gradient(to right,
    rgba(255, 255, 255, 0),
    rgba(217, 78, 12, 0.38),
    rgba(194, 65, 12, 0.62));
  }
}

/* 竖向：当前时间横线，与选择指示线一致，颜色 #FF692E；位置与尺寸由 inline 传入 */
.pisell-time-navigator-current-line {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.pisell-time-navigator-axis {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
}

.pisell-time-navigator-density-layer {
  position: absolute;
  left: 0;
  top: 1px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* 背景层（营业时间、过去时间淡化等；当前时间渐变已拆出为独立块） */
.pisell-time-navigator-background {
  position: absolute;
  inset: 0;
  pointer-events: none;

  .pisell-time-navigator-background-business {
    position: absolute;
    background: rgba(255, 105, 46, 0.08);
  }

  &--horizontal .pisell-time-navigator-background-business {
    top: 0;
    bottom: 0;
  }

  &--vertical .pisell-time-navigator-background-business {
    left: 0;
    right: 0;
  }
}

/* 刻度层 */
.pisell-time-navigator-scale {
  display: flex;
  position: relative;
  z-index: 1;

  &--horizontal {
    height: var(--pisell-time-nav-track-h, 48px);
    align-items: center;
    flex-direction: row;
  }

  /* 竖向：时间从上到下排列，每格 80px 高，与 Figma 一致 */

  &--vertical {
    width: 100%;
    flex-direction: column;
    flex-shrink: 0;
  }
}

.pisell-time-navigator-scale-cell {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &--h {
    width: 54px;
    padding: 2px 4px;
    flex-direction: column;
    gap: 0;
    /**
     * 设计调整：刻度点与时间数字整体靠下贴近底边（与上方 cursor 翻转后三角向下指刻度的视觉相呼应）。
     * 整点：点贴底；label 用 absolute 抠到底部，不挤占 cell 内容流。
     * 非整点：原本垂直居中的小点同样贴底，与整点点对齐成一条线。
     *
     * 父层 `.pisell-time-navigator-scale--horizontal` 用 `align-items: center` 把 cell 在
     * 48px 高度内垂直居中，但 cell 自身只靠 padding 撑高 → cell 实际只有几像素，
     * `bottom: 2px` 自然就贴在 cell 顶端附近（视觉上看像贴在轴的「中上」）。
     * 这里显式 `align-self: stretch + height: 100%`，让 cell 占满 48px 全高，
     * 再 absolute `bottom: 2px` 才会真正贴在轴的底边。
     */
    align-self: stretch;
    height: 100%;

    .pisell-time-navigator-scale-dot {
      position: absolute;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
    }

    &:not(.pisell-time-navigator-scale-cell--major) .pisell-time-navigator-scale-dot {
      top: auto;
      bottom: 14px;
      transform: translateX(-50%);
    }
  }

  /* 竖向：每格高度 20px，宽度 100%；整点格顶部粗线（对齐基准） */

  &--v {
    flex-shrink: 0;
    height: 20px;
    width: 100%;
    padding: 0 6px;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #d0d5dd;
    box-sizing: border-box;
  }

  &--v.pisell-time-navigator-scale-cell--major {
    border-top: 2px solid #d0d5dd;
  }
}

.pisell-time-navigator-scale-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: #000;
  /* 与 dot 一致：以格子水平中心为基准，避免与竖线错位 */
  text-align: center;
  /** 窄格（cursor-moves 压缩）下小时数字不换行 */
  white-space: nowrap;
}

.pisell-time-navigator-scale-cell--h .pisell-time-navigator-scale-label {
  /**
   * 整点小时数字与 dot 同基线整体上抬：
   * - `bottom: 14px` 与 dot 对齐，整点格的「数字 + 圆点」继续叠在同一基线上，
   *   非整点格只有 dot，也落在同一条线上，整条轴的刻度基线保持齐平；
   * - `left: 0; right: 0; width: 100%` + `text-align: center`（基类）实现水平居中，
   *   保证数字几何中心对齐 cell 中心，与上方 cursor 三角指向的位置一致；
   * - 与压缩格宽下的小字号配合，line-height 仅 1.15（见 ScaleLayer 内联样式），
   *   不会撑破 48px 的 scale 区高度。
   */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  width: 100%;
  line-height: 1;
}

.pisell-time-navigator-scale-cell--v .pisell-time-navigator-scale-label {
  font-size: 12px;
  line-height: normal;
  color: #333;
  align-self: flex-start;
}

.pisell-time-navigator-scale-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #eaecf0;
  flex-shrink: 0;
}

/* --h 下点的位置在 &--h 内已用 absolute 固定到格子中心 */

.pisell-time-navigator-scale-divider {
  position: absolute;
  left: 0;
  right: 0;
  height: 0.5px;
  background: #e5e5e5;
}

/* 竖向：细分线在格子底部，时间标签在上 */
.pisell-time-navigator-scale-cell--v .pisell-time-navigator-scale-divider {
  bottom: 0;
}

/* 时间指示器：以内部竖线/横线为对齐基准，容器宽/高=线宽/高，气泡绝对定位居中于线 */
.pisell-time-navigator-cursor {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;

  &--horizontal {
    top: 0;
    height: var(--pisell-time-nav-track-h, 48px);
    /** 与 CursorLayer CURSOR_ANCHOR_WIDTH_H / SVG 宽一致 */
    width: 22px;
  }

  /* Figma 竖向：横线 2px 贯穿轴宽，气泡在横线上方居中，不超出 54px 轴宽 */

  &--vertical {
    left: 50%;
    width: 54px;
    height: 2px;
    transform: translateX(-50%);
  }

  &--realtime .pisell-time-navigator-cursor-bubble {
    background: #ff692e;
  }

  &--realtime .pisell-time-navigator-cursor-line:not(
      .pisell-time-navigator-cursor-line--token
    ) {
    background: rgba(255, 105, 46, 0.55);
  }

  &--realtime .pisell-time-navigator-cursor-line--token {
    color: rgba(255, 105, 46, 0.55);
  }

  &--draggable {
    pointer-events: auto;
    touch-action: none;
    cursor: grab;

    &:active {
      cursor: grabbing;
    }
  }

  &--draggable.pisell-time-navigator-cursor--horizontal {
    width: 36px;
  }

  &--draggable.pisell-time-navigator-cursor--vertical {
    height: 40px;
  }
}

.pisell-time-navigator-cursor-line {
  flex: 1;
  min-width: 3px;
  min-height: 2px;
  background: rgba(52, 64, 84, 0.55);
}

/** 横向：顶三角 + 竖长条（SVG + currentColor） */
.pisell-time-navigator-cursor-line--token {
  display: block;
  width: 22px;
  flex: 1 1 auto;
  min-width: 22px;
  min-height: 0;
  background: transparent !important;
  color: rgba(52, 64, 84, 0.55);
}

/**
 * 横向 cursor 视觉翻转：原 path 三角朝上、长条向下，
 * 新设计气泡置顶，对应三角朝下指刻度，长条向上承接气泡。
 * 用 CSS scaleY(-1)（默认 transform-origin: center）整 SVG 翻转，避免改 path 数据。
 */
.pisell-time-navigator-cursor--horizontal .pisell-time-navigator-cursor-line--token {
  transform: scaleY(-1);
}

.pisell-time-navigator-cursor--vertical .pisell-time-navigator-cursor-line {
  width: 100%;
  height: 2px;
  min-width: 0;
}

/**
 * 真实「此刻」气泡：与指针气泡保持一致贴顶，锚在轴内当前时刻，橙色底
 * （与渐变/实时色一致）。`top: 0 !important` + `bottom: auto !important`
 * 防止历史 `bottom: 2px` 默认样式或浏览器缓存把它拉回底部。
 */
.pisell-time-navigator-current-time-bubble {
  position: absolute;
  z-index: 1;
  top: 0 !important;
  bottom: auto !important;
  left: 0;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 2px;
  background: #ff692e;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  white-space: nowrap;
  pointer-events: none;
}

.pisell-time-navigator-cursor-bubble {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 2px;
  background: #344054;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  white-space: nowrap;
}

/**
 * 横向：时间气泡贴近轴带顶边（与翻转后的指针三角朝下相对应，气泡浮在轴顶）。
 * - `top: 0 !important` + `bottom: auto !important` 锁死贴顶，避免历史 `bottom: 2px`
 *   默认布局、外层 `cursor-bubble` 基类、或浏览器缓存的旧规则把气泡拉回底部；
 * - 不使用 `translate(-100%)` 把气泡推出轴外，因为外层 ScrollView 是 `overflow: x`，
 *   超出顶/底的气泡会被裁掉，必须留在 cursor 容器（= axis 高度 48px）内；
 * - `transform-origin: bottom center` 让 dragging 态 scale 放大时锚点贴向气泡底部，
 *   视觉上像「按住后被举起」，而不会向上下均匀膨胀挤到刻度。
 */
.pisell-time-navigator-cursor--horizontal .pisell-time-navigator-cursor-bubble {
  top: 0 !important;
  bottom: auto !important;
  margin-top: 0;
  padding: 2px 6px;
  transform-origin: bottom center;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}

/**
 * 拖拽时隐藏内嵌的小气泡：放大版气泡在 .pisell-time-navigator-drag-bubble-overlay
 * 里独立渲染，可以自由突破 ScrollView 的 48px 上沿。这里若不隐藏，会出现两枚气泡
 * 重叠（一枚被裁掉一截，一枚浮在上面）。
 */
.pisell-time-navigator-cursor--horizontal.pisell-time-navigator-cursor--dragging
  .pisell-time-navigator-cursor-bubble {
  visibility: hidden;
}

/**
 * 拖拽气泡溢出层：sibling of scroll-host，逃出 PisellScrollView 的裁剪。
 * height: 0 + overflow: visible 让 overlay 自身不占布局空间，内部气泡通过
 * 负 top 自由浮在时间轴上沿之上；z-index 高于 cursor 和刻度，确保始终可见。
 */
.pisell-time-navigator-drag-bubble-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 20;
}

/**
 * 拖拽中的"放大气泡"：比内嵌气泡明显更大，下沿落在时间轴顶边附近、上沿浮出去。
 * - top: -10px 让气泡上半部分溢出 .pisell-time-navigator 的边界（对应"超过时间轴范围"）；
 * - transform-origin: bottom center 配合 scale-in 动画让气泡像被"举起"；
 * - box-shadow 强化漂浮感，与平铺态形成层级对比。
 */
.pisell-time-navigator-drag-bubble {
  position: absolute;
  top: -10px;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 4px;
  background: #344054;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.28),
    0 2px 6px rgba(16, 24, 40, 0.16);
  transform-origin: bottom center;
  animation: pisell-time-navigator-drag-bubble-pop 140ms ease-out;
}

.pisell-time-navigator-drag-bubble--realtime {
  background: #ff692e;
}

@keyframes pisell-time-navigator-drag-bubble-pop {
  from {
    transform: translateX(-50%) scale(0.85);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

/* 竖向：气泡在横线（cursor-line）垂直方向居中 */
.pisell-time-navigator-cursor--vertical .pisell-time-navigator-cursor-bubble {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  padding: 0 6px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 12px;
}

/* 交互层 */
.pisell-time-navigator-gesture {
  outline: none;
  min-height: 0;
  min-width: 0;

  &--horizontal {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  &--vertical {
    width: 100%;
  }
}

/* Now 按钮 */
.pisell-time-navigator-now {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 8px;
  border: 1px solid #eaecf0;
  background: #fff4ed;
  box-shadow: 0 4px 8px rgba(16, 24, 40, 0.1), 0 2px 4px rgba(16, 24, 40, 0.06);
  color: #ff692e;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  z-index: 3;
}

.pisell-time-navigator-now--vertical {
  padding: 10px 20px;
}

.pisell-time-navigator-now-icon {
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
}

.pisell-time-navigator-now--vertical .pisell-time-navigator-now-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 19V5M5 12l7 7 7-7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 19V5M5 12l7 7 7-7'/%3E%3C/svg%3E");
}