<div style="display:inline-flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:6px;background:#eff6ff;border-left:4px solid #3b82f6;box-shadow:0 4px 16px rgba(0,0,0,0.12);min-width:280px;max-width:420px;font-family:'Satoshi',sans-serif;position:relative;">
<span style="font-size:1.1rem;flex-shrink:0;line-height:1.4;">ℹ</span>
<div style="flex:1;min-width:0;">
<div style="font-size:0.8125rem;color:#1e40af;line-height:1.45;">Your thumbnail is being processed. This may take a moment.</div>
</div>
</div>
<div style="display:inline-flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:6px;background:{{bgColor}};border-left:4px solid {{borderColor}};box-shadow:0 4px 16px rgba(0,0,0,0.12);min-width:280px;max-width:420px;font-family:'Satoshi',sans-serif;position:relative;">
<span style="font-size:1.1rem;flex-shrink:0;line-height:1.4;">{{icon}}</span>
<div style="flex:1;min-width:0;">
{{#if title}}<div style="font-weight:700;font-size:0.875rem;color:{{titleColor}};margin-bottom:2px;">{{title}}</div>{{/if}}
<div style="font-size:0.8125rem;color:{{messageColor}};line-height:1.45;">{{message}}</div>
</div>
{{#if dismissible}}
<button style="background:none;border:none;cursor:pointer;color:{{messageColor}};font-size:1.1rem;line-height:1;padding:0;flex-shrink:0;opacity:0.5;margin-top:1px;">×</button>
{{/if}}
</div>
{
"type": "info",
"title": null,
"message": "Your thumbnail is being processed. This may take a moment.",
"icon": "ℹ",
"bgColor": "#eff6ff",
"borderColor": "#3b82f6",
"titleColor": "#1d4ed8",
"messageColor": "#1e40af",
"dismissible": false
}
Floating notification shown after user actions — script saved, post scheduled, delete confirmed etc. Appears in: top-right of screen on most tool pages. The real app also uses Drupal status messages for page-level feedback.