/* リマインダー専用の積み重ね枠
 *
 * 通常トースト (#notification-popup、単一枠) とは別の固定枠に、複数のリマインダーを
 * 縦に積んで表示する。通常トーストや別のリマインダーに上書きされて消える問題
 * (単一枠由来) を解消する。各カードは × でのみ閉じ、本体クリックでタスクを開く。
 */

.reminder-stack {
  position: fixed;
  top: calc(90px + var(--app-update-bar-height, 0px));
  right: 20px;
  z-index: 10250;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 40px);
  pointer-events: none;
  transition: top 0.2s ease;
}

/* 通常トースト (#notification-popup, 同じ右上 top:90px) 表示中だけ 1 枚分下げて重なりを避ける。
 * トーストは 3 秒で消える一時表示なので、消えれば元の位置にスッと戻る。 */
.reminder-stack--toast-active {
  top: calc(162px + var(--app-update-bar-height, 0px));
}

/* ドラッグで移動した後。left / top は JS が実座標を動的に入れる (インラインスタイル例外: 動的値) */
.reminder-stack--moved {
  right: auto;
}

.reminder-stack--dragging {
  user-select: none;
  transition: none;
}

.reminder-stack--dragging .reminder-card {
  cursor: grabbing;
}

/* ドラッグ中は背面のテキストが選択されないようにする */
body.reminder-drag-active {
  user-select: none;
  cursor: grabbing;
}

/* 1 行タイプ。通常の通知に埋もれないよう枠はリマインダー識別色 (紫) で強調する */
.reminder-card {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--color-surface);
  border: 1px solid #8b5cf6;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  animation: reminder-card-in 0.25s ease;
}

@keyframes reminder-card-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.reminder-card__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  /* リマインダー識別色 (通常トーストの variant-reminder と同じ穏やかな紫) */
  color: #8b5cf6;
}

.reminder-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ラベルと本文を 1 行に流す。長い本文は途中で切り、全文は title 属性で読める */
.reminder-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.reminder-card__label {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #8b5cf6;
}

.reminder-card__msg {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reminder-card__close {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.reminder-card__close:hover {
  background: var(--color-surface-alt);
}

@media (max-width: 640px) {
  .reminder-stack {
    top: calc(70px + var(--app-update-bar-height, 0px));
    right: 10px;
    left: 10px;
    width: auto;
  }

  .reminder-stack--toast-active {
    top: calc(142px + var(--app-update-bar-height, 0px));
  }
}