/* chat/09_toast_and_avatar.css
 * ------------------------------------------------------------
 * Split 9 of 10 from web/account/css/chat.css (CLAUDE.md §8.16 — see
 * 01_tokens_reset.css's header for the split's background; loaded ninth
 * in chat.html, right after the attachment-preview/drag-over file).
 *
 * Covers: the toast host and individual toasts (toast.js — error/info
 * variants) and the avatar component (avatar.js — size variants, the
 * photo layer positioned over the initials fallback, and the presence
 * dot).
 * ------------------------------------------------------------ */

/* ===== Toast (toast.js) ===== */

.chat-toast-host {
  position: absolute; /* relative to .chat-shell, so it stays inside the 400px column at any viewport width */
  left: 12px; right: 12px;
  bottom: 12px; /* the shell's own footer sits below the body region this occupies, so no extra offset is needed */
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 40;
  pointer-events: none; /* only individual toasts (below) intercept clicks — gaps between them must not */
}

.chat-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--chat-composer-field);
  color: var(--chat-bubble-text);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px var(--shadow-overlay-strong);
}
.chat-toast--error { border-left: 3px solid var(--error); }
.chat-toast--info { border-left: 3px solid var(--chat-read-tick); }
.chat-toast__message { flex: 1 1 auto; }
.chat-toast__action {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 13px;
  color: var(--chat-read-tick);
}

/* ===== Avatar (avatar.js) ===== */

.chat-avatar {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--chat-bubble-text);
  font-weight: 700;
  /* background-color is set inline per-instance from a seeded accent
     token (avatar.js) — the one case CLAUDE.md's inline-style house rule
     allows, since no static class could express "which of four colours
     THIS person gets". */
}
.chat-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.chat-avatar--md { width: 44px; height: 44px; font-size: 15px; }
.chat-avatar--lg { width: 64px; height: 64px; font-size: 20px; }
/* Absolutely positioned, NOT a flex item.
   .chat-avatar is a flex container centring the initials. An <img> appended
   into it (avatar.js does exactly that when a signed URL arrives) becomes a
   second flex ITEM, so the two share the circle and only part of the photo
   shows — which is precisely the bug this replaced. Taking the image out of
   flow lets it cover the whole circle while the initials stay behind it as
   the fallback they are meant to be. */
.chat-avatar__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-avatar__initials { text-transform: uppercase; user-select: none; }
.chat-avatar__presence {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  /* A ring in the surrounding surface colour separates the dot from
     whatever the avatar's photo happens to show underneath it — without
     it a light photo can make the dot disappear against its own edge. */
  box-shadow: 0 0 0 2px var(--chat-bg);
}