/* Home's inbox: the count on the bell and the panel it opens
   (notifications.js). The panel is menu.js's own `.palette`, which already
   brings the fixed position, the panel colour, the radius and the shadow;
   this makes it tall, scrolling and a list of people rather than commands. */

/* The badge on the bell's top-right corner, where the Feedback link's own
   count sits (home.css). Ringed in the bar's colour so it reads as sitting
   on the bell rather than bitten out of it. */
.notif__count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-panel);
  pointer-events: none;
}
.notif__count[hidden] { display: none; }

/* The bell's swing (notifications.js): a canvas over the glyph, half as
   big again since the artboard leaves room round the 24px bell to swing,
   under the count so the badge stays on top. The glyph is hidden only
   once the canvas is drawing. */
.notif__bell-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--icon-size) * 36 / 24);
  height: calc(var(--icon-size) * 36 / 24);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.notif__bell.is-animating > .icon { visibility: hidden; }
.notif__bell > .notif__count { z-index: 1; }

.palette.notif {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-height: min(640px, calc(100vh - 88px));
  padding: 0;
  overflow: hidden;
  outline: none;
}

/* The head is one row: the view's title, and pushed to the right the quiet
   button that switches to the other view (notifications.js). Hidden at
   zero, when the head is the title alone, as it always was. */
.notif__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 0;
}
.notif__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 14px 16px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Quiet: a way to another list, not a call to act. Set 2px low to sit on
   the title's own line, whose padding is heavier above than below. */
.notif__toggle {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-soft);
  cursor: var(--cursor-pointer);
}
.notif__toggle:hover { background: var(--bg-hover); color: var(--ink); }
.notif__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.notif__toggle[hidden] { display: none; }

.notif__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 6px 6px;
}

.notif__empty {
  margin: 0;
  padding: 12px 10px 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.notif__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.notif__row:hover { background: var(--bg-hover); }
.notif__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.notif__face {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
}
/* avatarImg (comments.js) hands back a .commentavatar, whose sizing lives in
   comments.css — a sheet home does not load — so the circle is restated here
   the way home.css already does for the owner's picture on a card. */
.notif__face .commentavatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
/* What kind of thing happened, tucked on the picture's corner: the person
   is the subject, the glyph only says what they did. */
.notif__glyph {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--bg-panel);
  box-shadow: 0 0 0 1px var(--line);
  --icon-size: 10px;
  --icon-stroke: 2.25;
}

/* A link visit has nobody to show: the visitor has no account. The glyph
   stands in a quiet circle the size of a picture. */
.notif__face--plain {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--ink-soft);
  --icon-size: 15px;
}

/* A hint is the app speaking rather than a person, so its circle takes the
   accent: advice, set apart from what somebody did. */
.notif__face--hint {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.notif__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  line-height: 1.4;
}
.notif__line strong { font-weight: 600; }
.notif__context,
.notif__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* The thread it belongs to, quieter than the reply itself: context, not
   news. One line is enough to recognise it. */
.notif__context {
  -webkit-line-clamp: 1;
  font-size: 12px;
  color: var(--ink-soft);
}
.notif__excerpt {
  -webkit-line-clamp: 2;
  padding-left: 8px;
  border-left: 2px solid var(--line-strong);
  color: var(--ink);
}
/* A reaction's emoji, a touch larger than the words round it so it reads
   as the thing given rather than punctuation. */
.notif__emoji {
  font-size: 1.15em;
  line-height: 1;
}
/* The status a slide reached, as the builder's pill wears it — small, so
   it sits in the sentence rather than over it. */
.notif__status {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  vertical-align: 1px;
  white-space: nowrap;
}
.notif__status.is-gone {
  padding: 0;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
}
.notif__time {
  font-size: 11px;
  color: var(--ink-soft);
}

/* New when the panel opened. The accent rather than the badge's red: the
   red is a call to open the panel, and once it is open that call has been
   answered. */
.notif__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 12px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 720px) {
  .palette.notif { width: calc(100vw - 32px); }
}