@charset "UTF-8";
/* ============================================================================
 * views/notification.css
 * COLAVIA v1.007.0000
 *
 *   通知一覧（§5.8-5）とヘッダのベル、メンションの候補。
 *
 *   ＜未読と既読を、色ではなく濃さで分ける＞
 *   色を割り当てると、通知の種類の色とぶつかる。
 *   既読は全体を薄くし、左の丸を抜きにする。
 *
 *   ＜行の右端に既読の切り替えを置く＞
 *   行そのものは「押すと対象へ移る」。
 *   切り替えを行の中に混ぜると、どちらが起きるか押す前に分からない。
 *
 *   サイズの指定は px より rem / vh / vw を優先する（§2.2）。
 *   :has() は使わない（§2.2）。
 * ========================================================================== */

/* ==========================================================================
   ヘッダのベル
   ========================================================================== */

.bell { position: relative; }

/* 未読の件数。アイコンの右上に重ねる。
   3桁を超える場合は「99+」にする（JS 側） */

.bell__badge {
  position: absolute;
  top: 0.1rem;
  right: 0.05rem;

  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;

  border-radius: var(--r-full);
  background: var(--c-red);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;

  /* 面の色で縁取る。アイコンの上に乗っても輪郭が消えない */
  box-shadow: 0 0 0 0.125rem var(--c-chrome-bg);
}

.bell__badge[hidden] { display: none; }

/* ==========================================================================
   通知の一覧
   ========================================================================== */

.noti-list {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-4);
}

/* 日付の区切り（§5.8-5） */

.noti-day {
  padding: var(--sp-3) var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-tertiary);
}

.noti {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);

  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);

  transition: border-color var(--dur-fast) var(--ease);
}

.noti:hover { border-color: var(--c-accent-soft); }

/* 既読は薄くする。色を変えると種類の色とぶつかる */

.noti.is-read { opacity: 0.62; }

.noti__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  background: var(--c-fill);
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

/* 行の本体。押すと対象へ移る */

.noti__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--c-text);
  text-decoration: none;
}

.noti__top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
}

.noti__type { font-weight: 700; color: var(--c-text-secondary); }

.noti__time { margin-left: auto; white-space: nowrap; }

.noti__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  word-break: break-word;
}

a.noti__main:hover .noti__title { color: var(--c-accent); text-decoration: underline; }

/* 該当箇所の引用（§5.8-5）。1行に収める。
   全文は対象の画面で読む */

.noti__excerpt {
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 対象が消えている通知。押せないことを示す */

.noti__gone {
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
  font-style: normal;
}

/* 既読・未読の切り替え。移動とぶつからないよう専用に置く */

.noti__toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  color: var(--c-accent);
  font-size: 0.5rem;
}

.noti__toggle:hover { background: var(--c-fill); }

.noti.is-read .noti__toggle { color: var(--c-text-tertiary); }

/* ==========================================================================
   種類の絞り込み
   ========================================================================== */

/* 件数の丸。どの種類が溜まっているかを一目で示す */

.tag-pick__n {
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  border-radius: var(--r-full);
  background: var(--c-accent);
  color: var(--c-text-on-accent);
  font-size: 0.625rem;
  font-weight: 700;
}

.tag-pick.is-on .tag-pick__n { background: var(--c-text-on-accent); color: var(--c-accent); }

/* ==========================================================================
   メンションの候補（§5.8）
   ========================================================================== */

/* 入力欄の上か下に浮かせる。位置は JS が測って入れる */

.mention-pop {
  position: fixed;
  z-index: 300;

  max-height: 15rem;
  overflow-y: auto;
  padding: 0.2rem;

  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-popup);
}

.mention-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--c-text);
}

.mention-item:hover,
.mention-item.is-active { background: var(--c-fill); }

.mention-item__name { font-size: var(--fs-sm); }

.mention-item__kana {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
}

/* ==========================================================================
   狭い画面
   ========================================================================== */

@media (max-width: 48rem) {

  .noti { padding: var(--sp-2); }

  /* 時刻は右端ではなく種類のすぐ後ろへ。
     幅が足りず、種類の行が2段になるのを防ぐ */
  .noti__time { margin-left: 0; }

  .noti__excerpt { white-space: normal; }
}