/* Neon eye override for read status
   Many message components render an inline <svg class="status-icon read">.
   We hide the svg children and show a flattened/pointed neon eye via background
   so we don't need to modify compiled JS assets. */

svg.status-icon.read{ 
  display:inline-block !important;
  width:16px !important;
  height:16px !important;
  vertical-align:middle !important;
  color:currentColor !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  /* flattened, pointed-ended eye SVG (hardcoded neon stroke + round pupil) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1.5 12C3.8 7 8.2 4.5 12 4.5s8.2 2.5 10.5 7.5C20.2 17 15.8 19.5 12 19.5S3.8 17 1.5 12z' stroke='%2300ff88' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/><circle cx='12' cy='12' r='3.5' fill='%2300ff88'/></svg>");
}

/* hide original svg children paths/circles so only the background shows */
svg.status-icon.read *{display:none !important}

/* keep neon filter/animation from main stylesheet */
.status-icon.read{
  transition:filter .25s ease, transform .25s ease;
}

svg.status-icon.read{filter:inherit; animation:inherit}

/* small accessibility tweak */
svg.status-icon.read[aria-hidden="false"]{outline: none}