/* 알림 종·알림 화면·@호출 강조·채팅 이름 고르기(사용자 2026-10-02 지시 '할 일 7'). 색은 app.css :root 토큰만, 인라인 style 없음(CSP). */

/* ---------- 상단 메뉴 종(정보와 설정 사이): 선 아이콘 + 안 읽음 빨간 점(개수는 접근성 이름에) ---------- */
.tw-bell { position: relative; text-decoration: none; }
.tw-bell[hidden] { display: none; }
.tw-bell:hover { text-decoration: none; }
.tw-bell[aria-current="page"] { color: var(--accent); }
.tw-bell__dot { position: absolute; top: 9px; right: calc(50% - 12px); width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.tw-bell__dot[hidden] { display: none; }
/* 메뉴가 6칸(종 추가)이 되어 360px 에서 설정 톱니가 12px 넘쳤다 — 글자 크기·높이 44px 는 그대로 두고 좌우 여백만 줄여 한 줄에 다 보이게(한 줄 메뉴 계약 v1) */
@media (max-width: 380px) {
  .tw-menu__trigger { padding-inline: 2px; }
  .tw-menu__trigger.is-icon { width: 30px; }
  .tw-brand { gap: 4px; }
}

/* ---------- 알림 화면 ---------- */
.tw-nt-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.tw-nt-pref { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-body); color: var(--fg); cursor: pointer; }
.tw-nt-pref input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.tw-nt-pref input:disabled, .tw-nt-pref input:disabled + span { cursor: not-allowed; color: var(--muted); }
.tw-nt-count { margin-left: auto; font-size: var(--fs-sub); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tw-nt-all { white-space: nowrap; }
.tw-nt-out { margin: 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-nt-out:empty { display: none; }
.tw-nt-out.is-bad { color: var(--bad); }
.tw-nt-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; border-top: var(--bw) solid var(--rule); }
.tw-nt-item { border-bottom: var(--bw) solid var(--rule); }
.tw-nt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-2) 10px; width: 100%; min-height: 48px; padding: 10px 4px;
  font: inherit; font-size: var(--fs-body); line-height: var(--lh-base); text-align: left; background: none; border: 0; color: var(--muted); cursor: pointer; }
.tw-nt-row:hover .tw-nt-text, .tw-nt-row:focus-visible .tw-nt-text { color: var(--accent); }
.tw-nt-ic { display: inline-flex; padding-top: 3px; color: var(--muted); }
.tw-nt-ic .tw-li { width: 18px; height: 18px; }
.tw-nt-item.is-unread .tw-nt-ic { color: var(--accent); }
.tw-nt-main { display: grid; gap: 2px; min-width: 0; }
.tw-nt-text { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.tw-nt-item.is-unread .tw-nt-text { color: var(--fg); font-weight: 600; }
.tw-nt-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--bad); vertical-align: middle; }
.tw-nt-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sub); color: var(--muted); }
.tw-nt-when { padding-top: 2px; font-size: var(--fs-sub); color: var(--muted); white-space: nowrap; }
.tw-nt-more { margin-top: var(--sp-2); }

/* ---------- @호출 강조(채팅·게시글·댓글·알림 미리보기 — 문법만 보고 강조, 나를 부른 것은 인디고 외곽선) ---------- */
.tw-mention { color: var(--accent); font-weight: 600; }
.tw-mention.is-me { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }   /* 덧칠 없음(CN2) — 밑줄로 구별 */
/* 나를 부른 채팅 메시지: 왼쪽 2px 강조선(색만으로 구별하지 않게 낭독 이름은 chat_panel.js 의 '나를 부름') */
.tw-cp-msg.is-mention { border-left: 2px solid var(--accent); padding-left: var(--sp-2); margin-left: calc(-1 * var(--sp-2) - 2px); }
/* 알림에서 찾아간 메시지·댓글: 1px 인디고 외곽선(덧칠 없음 — CN2, 잠시 뒤 class 를 뗀다) */
.tw-nt-target { outline: 1px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.tw-cp-msg.tw-nt-target { outline-offset: 0; }   /* 채팅 목록 안쪽 여백이 좁아(왼쪽 강조선) 패널 가장자리에 잘리지 않게 */

/* ---------- 채팅 입력 @이름 고르기(자동 완성): 입력칸 바로 위 떠 있는 목록, 키보드 ↑↓·Enter·Tab·Esc ---------- */
.tw-cp-form { position: relative; }
.tw-cp-ac { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: calc(100% - var(--sp-2)); z-index: 3; max-height: 220px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--pop-bg); color: var(--pop-fg); border: 1px solid var(--pop-line); border-radius: var(--radius-sm); box-shadow: var(--pop-shadow); }
.tw-cp-ac[hidden] { display: none; }
.tw-cp-ac li { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--radius-btn); font-size: var(--fs-body); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tw-cp-ac li small { margin-left: auto; font-size: var(--fs-cap); color: var(--muted); }
.tw-cp-ac li[aria-selected="true"] { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }