/* notify.css — the chips at the top of the page that report an error or a
   warning: "Couldn't save", "Still waiting for the agent…", "Server expires
   in 3 days". notify.js paints them into #notifyTray, a body-level strip;
   successes and progress get no chip at all (notify.js, QUIET_KINDS).

   The tray is a fixed strip over the main bar's band (its height follows
   --topbar-h, which app.js measures from the real bar), centred, and above
   every overlay: the dialog sits at 950, modals at 9999. The strip itself
   takes no pointer events, so the page under an empty strip stays clickable;
   a chip switches them back on for its own buttons. The top padding centres
   a single chip in the band; further chips stack downwards from it.

   A chip is one quiet surface in both themes — the menu surface, one hairline
   border, the composer's soft shadow — and says its kind with a flat 7 px
   status dot in the palette's status colour, never with a coloured box. The
   text keeps the page's own ink, so a warning reads as calmly as a success;
   only the hairline of an error or a warning takes a hint of its colour.

   A chip always shows its whole message: the text and the detail line wrap
   as far as they need, nothing is cut off with an ellipsis. */

.notify-tray {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: calc((var(--topbar-h, 52px) - 36px) / 2) .75rem .5rem;
  pointer-events: none;
}

.notify-chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  max-width: min(560px, 100%);
  min-width: 0;
  padding: .4rem .4rem .4rem .85rem;
  border: 1px solid var(--border2);
  border-radius: 12px;
  background: var(--menu-bg);
  box-shadow: var(--composer-shadow);
  color: var(--text);
  /* The chip's own size, which the two-line layout below measures against. */
  --chip-font: .82rem;
  font-size: var(--chip-font);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1);
}
.notify-chip.is-show {
  opacity: 1;
  transform: none;
}
.notify-chip.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition-duration: .16s;
}

/* The kind, as the same flat dot every status line in the panel carries. */
.notify-chip::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted2);
}
.notify-chip.is-ok::before { background: var(--led-on) }
.notify-chip.is-warn::before { background: var(--led-warn) }
.notify-chip.is-err::before { background: var(--led-err) }
.notify-chip.is-info::before {
  background: var(--accent);
  animation: notify-pulse 1.4s ease-in-out infinite;
}
.notify-chip.is-warn { border-color: color-mix(in srgb, var(--warn) 32%, var(--border2)) }
.notify-chip.is-err { border-color: color-mix(in srgb, var(--err) 32%, var(--border2)) }
@keyframes notify-pulse {
  0%, 100% { opacity: .35 }
  50%      { opacity: 1 }
}

/* The text and its optional detail line share one column. */
.notify-chip .notify-body {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}
.notify-chip .notify-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The quieter second line: one sentence of explanation under a short
   headline. */
.notify-chip .notify-detail {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 450;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* A two-line chip gets a little more air, and the dot, the action and the ✕
   line up with the headline rather than with the middle of the block. */
.notify-chip.has-detail {
  align-items: flex-start;
  padding: .55rem .45rem .6rem .9rem;
  border-radius: 14px;
}
.notify-chip.has-detail::before { margin-top: calc((1.3 * var(--chip-font) - 7px) / 2) }
.notify-chip.has-detail .notify-action,
.notify-chip.has-detail .notify-close { margin-top: calc((1.3 * var(--chip-font) - 26px) / 2) }
/* A chip with an action needs its room. */
.notify-chip.has-action { max-width: min(640px, 100%) }

/* The one action a chip can carry ("Extend now", "Reload"): a quiet outlined
   button, the same for <a> and <button>. The page-wide button recipe in
   base.css is undone here, and so is its hover lift. */
.notify-chip .notify-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 .6rem;
  border: 1px solid var(--outline-control);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.notify-chip .notify-action:hover {
  background: var(--shell-hover);
  border-color: var(--outline-hover);
  color: var(--text);
  text-decoration: none;
  transform: none;
}
.notify-chip .notify-action:active { transform: none }

/* Dismiss: an icon button like the shell's own. */
.notify-chip .notify-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.notify-chip .notify-close svg {
  width: 15px;
  height: 15px;
  display: block;
}
.notify-chip .notify-close:hover {
  background: var(--shell-hover);
  border: 0;
  color: var(--text);
  transform: none;
}
.notify-chip .notify-close:active { transform: none }
.notify-chip .notify-action:focus-visible,
.notify-chip .notify-close:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .notify-chip { transition: none }
  .notify-chip.is-info::before { animation: none }
}

/* Phone: the chip may take the main bar's whole width, and the dismiss
   button grows to a finger's size without making the chip taller. */
@media (max-width: 680px) {
  .notify-tray { padding: calc((var(--topbar-h, 52px) - 34px) / 2) .5rem .5rem }
  .notify-chip {
    max-width: 100%;
    padding: .36rem .3rem .36rem .75rem;
    --chip-font: .8rem;
  }
  .notify-chip.has-detail { padding: .5rem .35rem .55rem .8rem }
  .notify-chip .notify-close {
    width: 34px;
    height: 34px;
    margin: -.35rem 0;
  }
  .notify-chip.has-detail .notify-close { margin: calc((1.3 * var(--chip-font) - 34px) / 2) 0 0 }
}