/* Kole UI Mobile · NoticeBar 样式 — 对齐移动端规格 §16
   通知栏：浅底 + 同族字色；跑马灯在 prefers-reduced-motion: reduce 下停止滚动并换行显示。 */

.kole-m-noticebar {
  --kole-m-noticebar-icon-size: 16px;
  display: flex;
  align-items: center;
  gap: var(--kole-space-8);
  box-sizing: border-box;
  min-height: var(--kole-m-touch-target);
  padding: var(--kole-space-8) var(--kole-m-gutter);
  background: var(--kole-color-brand-bg);
  color: var(--kole-color-brand);
  font-family: var(--kole-font-family);
  font-size: var(--kole-m-font-size-label);
  line-height: 1.4;
  overflow: hidden;
}

/* 变体 tone：四种语气（浅底 + 同族深字） */
.kole-m-noticebar--default { background: var(--kole-color-brand-bg); color: var(--kole-color-brand); }
.kole-m-noticebar--success { background: var(--kole-color-tag-green-bg); color: var(--kole-color-success); }
.kole-m-noticebar--warning { background: var(--kole-color-table-header-bg); color: var(--kole-color-warning); }
.kole-m-noticebar--danger { background: var(--kole-color-table-header-bg); color: var(--kole-color-error); }

.kole-m-noticebar__icon {
  flex: 0 0 auto;
  font-size: var(--kole-m-noticebar-icon-size);
  line-height: 1;
}

.kole-m-noticebar__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 变体 scrollable=true：文字超宽时跑马灯（内容用两段拼接实现无缝循环） */
.kole-m-noticebar--scrollable .kole-m-noticebar__text {
  text-overflow: clip;
}

.kole-m-noticebar--scrollable .kole-m-noticebar__track {
  display: inline-flex;
  gap: var(--kole-space-48);
  padding-inline-end: var(--kole-space-48);
  white-space: nowrap;
  animation: kole-m-noticebar-scroll 12s linear infinite;
}

@keyframes kole-m-noticebar-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 无障碍硬要求：减少动态偏好下停止滚动并允许换行（规格 §16.5） */
@media (prefers-reduced-motion: reduce) {
  .kole-m-noticebar--scrollable .kole-m-noticebar__text {
    white-space: normal;
  }
  .kole-m-noticebar--scrollable .kole-m-noticebar__track {
    display: block;
    animation: none;
    padding-inline-end: 0;
  }
  /* 滚动形态下第二段是循环占位，静止时不该出现 */
  .kole-m-noticebar--scrollable .kole-m-noticebar__track > .kole-m-noticebar__seg--dup {
    display: none;
  }
}

/* 关闭按钮：原生 button，24×24 热区（负外边距吸收，不撑高栏体） */
.kole-m-noticebar__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-inline-end: calc(-1 * var(--kole-space-8));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--kole-m-font-size-caption);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.kole-m-noticebar__close:focus-visible {
  outline: 2px solid var(--kole-color-focus-ring);
  outline-offset: -2px;
}

.kole-m-noticebar__close:active { background: var(--kole-color-table-header-bg); }