/* Original approved nine-expression sheet stays intact for future positive states. */
.vesta-error-face {
  display: inline-block; flex: 0 0 auto; width: 64px; height: 64px;
  position: relative; overflow: hidden; isolation: isolate; background: #f8f5ef;
  border-radius: 20px; vertical-align: middle; pointer-events: none;
}
/* Trim the contact sheet gutters inside the viewport. Keep the photo square
   and leave more room above the head than below the wrists. */
.vesta-error-face::before {
  content: ""; position: absolute; inset: -1% -3% -5%;
  background: #f8f5ef url("vesta-reactions/vesta-emotions-20260915.png") var(--vesta-x, 0%) var(--vesta-y, 0%) / 300% 300% no-repeat;
}
.vesta-error-card {
  position: fixed; z-index: 2147483000; right: max(20px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom)); box-sizing: border-box;
  display: flex; align-items: flex-start; gap: 16px; width: 480px; max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 48px); overflow: auto; padding: 20px;
  border: 1px solid #ded6ca; border-radius: 24px; background: #fffdf8; color: #413c35;
  box-shadow: 0 12px 42px #2b251e26; font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.vesta-error-card .vesta-error-face { width: 112px; height: 112px; border-radius: 24px; }
.vesta-error-card-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vesta-error-card strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.vesta-error-card p { margin: 10px 0 16px; white-space: pre-line; }
.vesta-error-card button { border: 1px solid #d4c8b6; background: #f0e8da; color: #413c35; border-radius: 12px; padding: 9px 18px; min-height: 40px; font: inherit; font-weight: 600; cursor: pointer; }
.vesta-error-card button:focus-visible, .vesta-error-receipt:focus-visible { outline: 2px solid #867351; outline-offset: 3px; }
.vesta-error-reference {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin-top: 16px; padding-top: 10px; border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 16%, transparent);
  color: #776f63; font: 400 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.vesta-error-reference code { color: inherit; background: none; padding: 0; font: 400 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; letter-spacing: .02em; }
.vesta-error-reference small { flex-basis: 100%; font: inherit; }
.vesta-inline-error .vesta-error-reference { margin-top: 8px; padding-top: 7px; }
html[data-theme="dark"] .vesta-error-reference { color: #b7ada0; }
html body .vesta-inline-error { display: flex !important; align-items: center; gap: 12px; color: var(--ink, #51483c); }
.vesta-inline-error > [data-vesta-error-copy] { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vesta-inline-error [data-vesta-inline-heading] { display: block; margin-bottom: 5px; font-size: 13px; line-height: 1.35; font-weight: 600; color: inherit; }
.vesta-inline-error > .vesta-error-face { width: 56px; height: 56px; border-radius: 16px; }
html body .vesta-error-receipt { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; border: 0; border-radius: 8px; color: inherit !important; font: inherit; cursor: pointer; }
html body .vesta-error-receipt .vesta-error-face, .conversation-delivered .vesta-error-face { width: 26px; height: 26px; border-radius: 8px; }
html body .vesta-error-receipt .message-status-label { color: inherit !important; }
html body .message-translation-marker.is-error.vesta-inline-error { color: inherit; }
.app-copy-feedback-toast.is-centered.is-error::before { content: none; }
@media (max-width: 520px) {
  .vesta-error-card { display: block; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); padding: 16px; gap: 12px; }
  .vesta-error-card .vesta-error-face { width: 80px; height: 80px; border-radius: 20px; float: left; margin: 0 12px 12px 0; }
  .vesta-error-card-copy { display: contents; }
  .vesta-error-card strong { min-height: 80px; display: flex; align-items: center; }
  .vesta-error-card p { clear: both; }
}
html[data-theme="dark"] .vesta-error-card { background: #2e2c29; border-color: #595147; color: #f1e9dc; }

html body :is(.auth-error, .conversation-create-error, .notice.error, .user-settings-note.error).vesta-inline-error { background-color: #f8f3eb !important; border-color: #e4d9c9 !important; }
html[data-theme="dark"] body .vesta-inline-error { color: #f1e9dc !important; }
html[data-theme="dark"] body :is(.auth-error, .conversation-create-error, .notice.error, .user-settings-note.error).vesta-inline-error { background-color: #37322b !important; border-color: #5d5143 !important; }

/* Preserve native hidden state while async forms clear or replace errors. */
html body .vesta-inline-error[hidden], html body .vesta-inline-error.hidden { display: none !important; }