#bn-li { list-style: none; }
#bn-bell { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
#bn-bell svg { width: 18px; height: 18px; fill: currentColor; }
#bn-count { margin-left: 5px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: #d32f2f; color: #fff; font-size: 12px; line-height: 18px; text-align: center; font-weight: bold; }
#bn-panel { position: fixed; z-index: 1000; width: 380px; max-width: 94vw; max-height: 70vh; overflow-y: auto;
  background: #fff; color: #333; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
#bn-panel .bn-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid #eee; font-weight: bold; }
#bn-panel .bn-head a { font-weight: normal; font-size: 12px; cursor: pointer; }
#bn-panel .bn-empty { padding: 20px 12px; color: #888; text-align: center; }
#bn-panel .bn-item { display: block; position: relative; padding: 9px 12px 9px 28px; border-bottom: 1px solid #eee; text-decoration: none; color: #888; background: #fff; }
#bn-panel .bn-item:hover { background: #f3f7fc; }
/* 未読：青い背景・太い青の線・青い点・太字。既読：白地・灰色の文字・点なし */
#bn-panel .bn-item.unread { background: #e3f0ff; border-left: 4px solid #1e88e5; padding-left: 24px; color: #222; }
#bn-panel .bn-item.unread:hover { background: #d2e6fb; }
#bn-panel .bn-dot { position: absolute; left: 10px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #1e88e5; }
#bn-panel .bn-item.unread .bn-dot { left: 7px; }
#bn-panel .bn-item:not(.unread) .bn-dot { display: none; }
#bn-panel .bn-msg { font-size: 13px; font-weight: normal; }
#bn-panel .bn-item.unread .bn-msg { font-weight: bold; }
#bn-panel .bn-issue { font-size: 12px; color: #8aa0b8; margin-top: 2px; word-break: break-all; }
#bn-panel .bn-item.unread .bn-issue { color: #1565c0; }
#bn-panel .bn-state { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: bold; background: #1e88e5; color: #fff; }
#bn-panel .bn-item:not(.unread) .bn-state { display: none; }
#bn-panel .bn-meta { font-size: 11px; color: #999; margin-top: 2px; }

/* 共通ヘッダー（ベルのある帯）の高さを少し広げる（標準は上下 2px の余白。上下 5px にして、約 6px 高くする） */
#top-menu { padding-top: 5px; padding-bottom: 5px; }

/* 共通ヘッダーの文字を一段大きくする（標準 0.8em → 0.9em） */
#top-menu { font-size: 0.9em; }
#bn-bell svg { width: 20px; height: 20px; }