@mushi-mushi/web 0.4.0 → 0.5.0

package/dist/index.js

@@ -216,294 +216,607 @@ function getAvailableLocales() {
 // src/styles.ts
 function getWidgetStyles(theme) {
   const isDark = theme === "dark";
-  const accent = "#7c3aed";
-  const accentHover = "#6d28d9";
-  const accentBgLight = isDark ? "#2e2440" : "#f5f3ff";
-  const accentBgSelected = isDark ? "#2e2440" : "#ede9fe";
-  const border = isDark ? "#3f3f46" : "#e4e4e7";
-  const bgSurface = isDark ? "#18181b" : "#ffffff";
-  const bgMuted = isDark ? "#27272a" : "#fafafa";
-  const textMuted = isDark ? "#a1a1aa" : "#71717a";
+  const paper = isDark ? "#0F0E0C" : "#F8F4ED";
+  const ink = isDark ? "#F2EBDD" : "#0E0D0B";
+  const inkMuted = isDark ? "#928B7E" : "#5C5852";
+  const inkFaint = isDark ? "#5A5650" : "#9A9489";
+  const rule = isDark ? "rgba(242,235,221,0.10)" : "rgba(14,13,11,0.10)";
+  const ruleStrong = isDark ? "rgba(242,235,221,0.18)" : "rgba(14,13,11,0.16)";
+  const vermillion = isDark ? "#FF5A47" : "#E03C2C";
+  const vermillionWash = isDark ? "rgba(255,90,71,0.12)" : "rgba(224,60,44,0.08)";
+  const vermillionInk = isDark ? "#FFE5E0" : "#7A1F15";
+  const fontDisplay = `'Iowan Old Style', 'Palatino Linotype', 'Palatino', 'Book Antiqua', 'Cambria', Georgia, 'Times New Roman', serif`;
+  const fontBody = `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI', sans-serif`;
+  const fontMono = `ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace`;
+  const easeStamp = "cubic-bezier(0.22, 1, 0.36, 1)";
   return `
     :host {
       all: initial;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: ${fontBody};
       font-size: 14px;
-      line-height: 1.5;
-      color: ${isDark ? "#e4e4e7" : "#18181b"};
-    }
+      line-height: 1.55;
+      color: ${ink};
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      font-feature-settings: 'ss01', 'cv11'; /* nicer system-ui glyphs where supported */
+    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    button { font-family: inherit; }
 
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    /* Trigger button */
+    /* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       A small "stamp card" \u2014 soft rounded square (4px radius), paper
+       background, vermillion bottom edge that reads as the inked face
+       of a real \u5370\u9451. A pulsing dot in the top-right hints there's a
+       channel here without needing a notification badge. */
     .mushi-trigger {
       position: fixed;
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      border: none;
+      width: 52px;
+      height: 52px;
+      border: 1px solid ${ruleStrong};
+      border-radius: 4px;
+      background: ${paper};
+      color: ${ink};
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
+      font-family: ${fontDisplay};
       font-size: 22px;
-      background: ${bgMuted};
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      line-height: 1;
+      box-shadow:
+        0 1px 0 ${rule},
+        0 6px 14px -8px rgba(14,13,11,0.35),
+        inset 0 -3px 0 ${vermillion};
+      transition: transform 200ms ${easeStamp}, box-shadow 200ms ${easeStamp};
+      overflow: visible;
+      isolation: isolate;
+    }
+    .mushi-trigger::after {
+      content: '';
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: ${vermillion};
+      box-shadow: 0 0 0 0 ${vermillion};
+      animation: mushi-pulse 2.4s ${easeStamp} infinite;
     }
     .mushi-trigger:hover {
-      transform: scale(1.08);
-      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+      transform: translateY(-2px) rotate(-1.5deg);
+      box-shadow:
+        0 1px 0 ${rule},
+        0 14px 24px -10px rgba(14,13,11,0.45),
+        inset 0 -3px 0 ${vermillion};
+    }
+    .mushi-trigger:active {
+      transform: translateY(0) rotate(0);
+      box-shadow:
+        0 1px 0 ${rule},
+        0 2px 4px -2px rgba(14,13,11,0.35),
+        inset 0 -2px 0 ${vermillion};
+    }
+    .mushi-trigger:focus-visible {
+      outline: 2px solid ${vermillion};
+      outline-offset: 3px;
+    }
+    .mushi-trigger.bottom-right { bottom: 24px; right: 24px; }
+    .mushi-trigger.bottom-left  { bottom: 24px; left: 24px; }
+    .mushi-trigger.top-right    { top: 24px; right: 24px; }
+    .mushi-trigger.top-left     { top: 24px; left: 24px; }
+
+    @keyframes mushi-pulse {
+      0%   { box-shadow: 0 0 0 0 ${vermillion}; opacity: 1; }
+      70%  { box-shadow: 0 0 0 8px rgba(224,60,44,0); opacity: 0.5; }
+      100% { box-shadow: 0 0 0 0 rgba(224,60,44,0); opacity: 1; }
     }
-    .mushi-trigger.bottom-right { bottom: 20px; right: 20px; }
-    .mushi-trigger.bottom-left  { bottom: 20px; left: 20px; }
-    .mushi-trigger.top-right    { top: 20px; right: 20px; }
-    .mushi-trigger.top-left     { top: 20px; left: 20px; }
 
-    /* Panel */
+    /* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       Paper-card. Sharper corners (6px) than typical SaaS modals
+       (which default to 12-16px and read as plastic). Two-layer shadow:
+       one hairline that sells the paper edge, one diffuse that lifts
+       the panel off the underlying app. No backdrop-filter \u2014 we want
+       the widget to feel like it sits ON the page, not blur INTO it. */
     .mushi-panel {
       position: fixed;
-      width: 380px;
-      max-height: 560px;
-      border-radius: 12px;
-      background: ${bgSurface};
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
-      border: 1px solid ${border};
+      width: 384px;
+      max-width: calc(100vw - 32px);
+      max-height: min(640px, calc(100vh - 120px));
+      background: ${paper};
+      border: 1px solid ${ruleStrong};
+      border-radius: 6px;
+      box-shadow:
+        0 1px 0 ${rule},
+        0 24px 56px -20px rgba(14,13,11,0.30),
+        0 8px 16px -8px rgba(14,13,11,0.20);
       overflow: hidden;
       display: flex;
       flex-direction: column;
+      transform-origin: var(--mushi-origin, bottom right);
     }
-    .mushi-panel.open {
-      animation: mushi-slide-in 0.25s ease forwards;
-    }
+    .mushi-panel.open  { animation: mushi-stamp-in 320ms ${easeStamp} both; }
     .mushi-panel.closed { display: none; }
-    .mushi-panel.bottom-right { bottom: 76px; right: 20px; }
-    .mushi-panel.bottom-left  { bottom: 76px; left: 20px; }
-    .mushi-panel.top-right    { top: 76px; right: 20px; }
-    .mushi-panel.top-left     { top: 76px; left: 20px; }
+    .mushi-panel.bottom-right { bottom: 88px; right: 24px; --mushi-origin: bottom right; }
+    .mushi-panel.bottom-left  { bottom: 88px; left: 24px;  --mushi-origin: bottom left; }
+    .mushi-panel.top-right    { top: 88px;    right: 24px; --mushi-origin: top right; }
+    .mushi-panel.top-left     { top: 88px;    left: 24px;  --mushi-origin: top left; }
 
-    @keyframes mushi-slide-in {
-      from { opacity: 0; transform: translateY(8px) scale(0.98); }
-      to   { opacity: 1; transform: translateY(0) scale(1); }
+    @keyframes mushi-stamp-in {
+      0%   { opacity: 0; transform: scale(0.94) translateY(6px); }
+      60%  { opacity: 1; }
+      100% { opacity: 1; transform: scale(1) translateY(0); }
     }
 
-    /* Header */
+    /* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       Editorial masthead: small mono eyebrow ("MUSHI / REPORT") on top,
+       serif display headline below, mono step counter on the far right.
+       A single hairline separates header from body \u2014 no card stacking. */
     .mushi-header {
-      padding: 14px 16px;
-      border-bottom: 1px solid ${border};
-      display: flex;
+      padding: 18px 20px 14px;
+      border-bottom: 1px solid ${rule};
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: end;
+      gap: 12px;
+    }
+    .mushi-header-mark {
+      display: inline-flex;
       align-items: center;
-      gap: 8px;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      border-radius: 3px;
+      background: ${vermillion};
+      color: #FAF7F0;
+      font-family: ${fontDisplay};
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1;
+      letter-spacing: -0.02em;
+      transform: rotate(-3deg);
+      flex-shrink: 0;
+    }
+    .mushi-header-titles {
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .mushi-header-eyebrow {
+      font-family: ${fontMono};
+      font-size: 10px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: ${inkMuted};
     }
     .mushi-header h3 {
-      font-size: 15px;
+      font-family: ${fontDisplay};
+      font-size: 19px;
+      font-weight: 500;
+      line-height: 1.15;
+      letter-spacing: -0.01em;
+      color: ${ink};
+    }
+    .mushi-header-meta {
+      align-self: start;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .mushi-step-counter {
+      font-family: ${fontMono};
+      font-size: 11px;
+      color: ${inkMuted};
+      letter-spacing: 0.06em;
+      tab-size: 2ch;
+      padding-top: 2px;
+    }
+    .mushi-step-counter b {
       font-weight: 600;
-      flex: 1;
+      color: ${ink};
     }
     .mushi-close, .mushi-back {
       background: none;
       border: none;
       cursor: pointer;
-      font-size: 18px;
-      color: ${textMuted};
       padding: 4px;
-      border-radius: 4px;
+      color: ${inkMuted};
+      font-family: ${fontBody};
+      font-size: 14px;
       line-height: 1;
+      border-radius: 3px;
+      transition: color 150ms ${easeStamp};
     }
-    .mushi-close:hover, .mushi-back:hover {
-      background: ${bgMuted};
+    .mushi-close:hover, .mushi-back:hover { color: ${vermillion}; }
+    .mushi-close:focus-visible, .mushi-back:focus-visible {
+      outline: 1.5px solid ${vermillion};
+      outline-offset: 2px;
     }
 
-    /* Body */
+    /* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       Generous left/right padding (22px) so type breathes. Vertical
+       padding tighter at top because the header rule already creates
+       breathing room. */
     .mushi-body {
-      padding: 12px 16px;
+      padding: 8px 22px 16px;
       overflow-y: auto;
       flex: 1;
+      scrollbar-width: thin;
+      scrollbar-color: ${inkFaint} transparent;
     }
+    .mushi-body::-webkit-scrollbar { width: 6px; }
+    .mushi-body::-webkit-scrollbar-thumb { background: ${inkFaint}; border-radius: 3px; }
 
-    /* Step 1: Category options */
+    /* \u2500\u2500 Step 1: Categories as a contents-page list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       No boxes. Hairline rules between rows. Hovering a row pulls a
+       vermillion arrow in from the right and tints the row label \u2014
+       reads like flipping through an index card. */
     .mushi-option-btn {
-      display: flex;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
       align-items: center;
-      gap: 12px;
+      gap: 14px;
       width: 100%;
-      padding: 12px 14px;
-      margin-bottom: 8px;
-      border-radius: 10px;
-      border: 1px solid ${border};
-      background: ${bgMuted};
+      padding: 14px 0;
+      border: none;
+      border-bottom: 1px solid ${rule};
+      background: transparent;
       cursor: pointer;
-      font-size: 14px;
       color: inherit;
       text-align: left;
-      transition: border-color 0.15s, background 0.15s, transform 0.1s;
-    }
-    .mushi-option-btn:hover {
-      border-color: ${isDark ? "#a78bfa" : accent};
-      background: ${accentBgLight};
-      transform: translateX(2px);
+      transition: padding 220ms ${easeStamp}, color 220ms ${easeStamp};
+      position: relative;
     }
+    .mushi-option-btn:last-child { border-bottom: none; }
+    .mushi-option-btn:hover { padding-left: 6px; color: ${vermillion}; }
+    .mushi-option-btn:hover .mushi-option-arrow { opacity: 1; transform: translateX(0); color: ${vermillion}; }
     .mushi-option-btn:focus-visible {
-      outline: 2px solid ${accent};
-      outline-offset: 2px;
+      outline: none;
+      padding-left: 6px;
+      box-shadow: inset 2px 0 0 ${vermillion};
+    }
+    .mushi-option-icon {
+      font-size: 18px;
+      line-height: 1;
+      flex-shrink: 0;
+      filter: ${isDark ? "none" : "grayscale(0.15)"};
+    }
+    .mushi-option-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+    .mushi-option-label {
+      font-family: ${fontDisplay};
+      font-size: 16px;
+      font-weight: 500;
+      letter-spacing: -0.005em;
+      line-height: 1.2;
+    }
+    .mushi-option-desc {
+      font-size: 12px;
+      color: ${inkMuted};
+      letter-spacing: 0.005em;
+    }
+    .mushi-option-arrow {
+      font-family: ${fontMono};
+      font-size: 14px;
+      color: ${inkFaint};
+      opacity: 0;
+      transform: translateX(-4px);
+      transition: opacity 220ms ${easeStamp}, transform 220ms ${easeStamp}, color 220ms ${easeStamp};
     }
-    .mushi-option-icon { font-size: 20px; flex-shrink: 0; }
-    .mushi-option-text { display: flex; flex-direction: column; gap: 2px; }
-    .mushi-option-label { font-weight: 500; }
-    .mushi-option-desc { font-size: 12px; color: ${textMuted}; }
 
-    /* Step 2: Intent chips */
+    /* \u2500\u2500 Step 2: Selected-category breadcrumb + intent text-buttons \u2500
+       Breadcrumb is a thin chip with the kanji-stamp aesthetic carried
+       over (vermillion left rule). Intents are inline TEXT buttons
+       with vermillion underlines on hover \u2014 not pill-shaped chips,
+       which is the SaaS default and not what we are. */
     .mushi-selected-category {
-      display: flex;
+      display: inline-flex;
       align-items: center;
       gap: 8px;
-      padding: 8px 12px;
-      border-radius: 8px;
-      background: ${accentBgSelected};
-      font-size: 13px;
-      font-weight: 500;
-      margin-bottom: 12px;
-    }
+      padding: 6px 10px 6px 12px;
+      border-left: 2px solid ${vermillion};
+      background: ${vermillionWash};
+      color: ${vermillionInk};
+      font-family: ${fontMono};
+      font-size: 11px;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      margin: 4px 0 14px;
+      border-radius: 0 3px 3px 0;
+    }
+    .mushi-selected-category span:first-child { font-size: 14px; }
     .mushi-intents {
       display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
+      flex-direction: column;
+      gap: 2px;
     }
     .mushi-intent-btn {
-      padding: 8px 16px;
-      border-radius: 20px;
-      border: 1px solid ${border};
-      background: ${bgMuted};
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 12px 0;
+      border: none;
+      border-bottom: 1px solid ${rule};
+      background: transparent;
       cursor: pointer;
-      font-size: 13px;
       color: inherit;
-      transition: border-color 0.15s, background 0.15s;
-    }
-    .mushi-intent-btn:hover {
-      border-color: ${isDark ? "#a78bfa" : accent};
-      background: ${accentBgLight};
+      text-align: left;
+      font-family: ${fontDisplay};
+      font-size: 15px;
+      transition: padding 220ms ${easeStamp}, color 220ms ${easeStamp};
     }
+    .mushi-intent-btn::after {
+      content: '\u2192';
+      font-family: ${fontMono};
+      font-size: 13px;
+      color: ${inkFaint};
+      opacity: 0;
+      transform: translateX(-4px);
+      transition: opacity 220ms ${easeStamp}, transform 220ms ${easeStamp};
+    }
+    .mushi-intent-btn:last-child { border-bottom: none; }
+    .mushi-intent-btn:hover { padding-left: 6px; color: ${vermillion}; }
+    .mushi-intent-btn:hover::after { opacity: 1; transform: translateX(0); color: ${vermillion}; }
     .mushi-intent-btn:focus-visible {
-      outline: 2px solid ${accent};
-      outline-offset: 2px;
+      outline: none;
+      padding-left: 6px;
+      box-shadow: inset 2px 0 0 ${vermillion};
     }
 
-    /* Step 3: Details */
+    /* \u2500\u2500 Step 3: Borderless textarea + minimal attach pills \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       The textarea has no box around it \u2014 just a hairline underline
+       that turns vermillion on focus. Encourages writing rather than
+       form-filling. */
     .mushi-textarea {
       width: 100%;
-      min-height: 90px;
-      padding: 10px 12px;
-      border-radius: 8px;
-      border: 1px solid ${border};
-      background: ${bgMuted};
-      color: inherit;
-      font-family: inherit;
+      min-height: 96px;
+      padding: 8px 0 10px;
+      border: none;
+      border-bottom: 1px solid ${ruleStrong};
+      background: transparent;
+      color: ${ink};
+      font-family: ${fontBody};
       font-size: 14px;
+      line-height: 1.5;
       resize: vertical;
       outline: none;
-      transition: border-color 0.15s, box-shadow 0.15s;
+      transition: border-color 200ms ${easeStamp};
     }
-    .mushi-textarea:focus {
-      border-color: ${isDark ? "#a78bfa" : accent};
-      box-shadow: 0 0 0 2px ${isDark ? "rgba(167,139,250,0.2)" : "rgba(124,58,237,0.1)"};
+    .mushi-textarea::placeholder {
+      color: ${inkFaint};
+      font-style: italic;
     }
+    .mushi-textarea:focus { border-bottom-color: ${vermillion}; }
 
     .mushi-attachments {
       display: flex;
-      gap: 8px;
-      margin-top: 10px;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-top: 12px;
     }
     .mushi-attach-btn {
-      padding: 6px 12px;
-      border-radius: 6px;
-      border: 1px solid ${border};
-      background: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 5px 10px;
+      border: 1px solid ${ruleStrong};
+      border-radius: 3px;
+      background: transparent;
+      color: ${inkMuted};
+      font-family: ${fontMono};
+      font-size: 11px;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
       cursor: pointer;
-      font-size: 12px;
-      color: ${textMuted};
-      transition: border-color 0.15s, color 0.15s;
+      transition: color 180ms ${easeStamp}, border-color 180ms ${easeStamp}, background 180ms ${easeStamp};
     }
     .mushi-attach-btn:hover {
-      border-color: ${isDark ? "#a78bfa" : accent};
-      color: inherit;
+      color: ${ink};
+      border-color: ${ink};
     }
     .mushi-attach-btn.active {
-      border-color: ${isDark ? "#a78bfa" : accent};
-      color: ${isDark ? "#a78bfa" : accent};
-      background: ${accentBgLight};
+      color: ${vermillion};
+      border-color: ${vermillion};
+      background: ${vermillionWash};
+    }
+    .mushi-attach-btn:focus-visible {
+      outline: 2px solid ${vermillion};
+      outline-offset: 2px;
     }
 
-    /* Footer */
+    /* \u2500\u2500 Footer + submit (vermillion stamp) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       Submit button is the heaviest visual moment in the widget \u2014
+       vermillion fill, mono-caps label, send arrow. Holds an ink-
+       bloom pseudo-element that animates outward when pressed. */
     .mushi-footer {
-      padding: 12px 16px;
-      border-top: 1px solid ${border};
+      padding: 14px 22px 16px;
+      border-top: 1px solid ${rule};
       display: flex;
       align-items: center;
-      justify-content: flex-end;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    .mushi-footer-hint {
+      font-family: ${fontMono};
+      font-size: 10px;
+      letter-spacing: 0.10em;
+      text-transform: uppercase;
+      color: ${inkFaint};
     }
     .mushi-submit {
-      padding: 8px 24px;
-      border-radius: 8px;
-      border: none;
-      background: ${accent};
-      color: #ffffff;
-      font-size: 14px;
-      font-weight: 500;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      border: 1px solid ${vermillion};
+      border-radius: 3px;
+      background: ${vermillion};
+      color: #FAF7F0;
+      font-family: ${fontMono};
+      font-size: 11px;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
       cursor: pointer;
-      transition: background 0.15s;
+      overflow: hidden;
+      transition: transform 180ms ${easeStamp}, box-shadow 180ms ${easeStamp};
+      box-shadow: 0 2px 0 ${isDark ? "#7A1F15" : "#9A2A1E"};
+    }
+    .mushi-submit::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: radial-gradient(circle at center, rgba(255,255,255,0.35) 0%, transparent 60%);
+      opacity: 0;
+      transform: scale(0.4);
+      transition: opacity 280ms ${easeStamp}, transform 380ms ${easeStamp};
+      pointer-events: none;
+    }
+    .mushi-submit:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 3px 0 ${isDark ? "#7A1F15" : "#9A2A1E"};
+    }
+    .mushi-submit:hover::after { opacity: 1; transform: scale(1.4); }
+    .mushi-submit:active { transform: translateY(1px); box-shadow: 0 1px 0 ${isDark ? "#7A1F15" : "#9A2A1E"}; }
+    .mushi-submit:disabled {
+      cursor: wait;
+      opacity: 0.7;
     }
-    .mushi-submit:hover { background: ${accentHover}; }
-    .mushi-submit:disabled { opacity: 0.5; cursor: not-allowed; }
     .mushi-submit:focus-visible {
-      outline: 2px solid ${accent};
-      outline-offset: 2px;
+      outline: 2px solid ${vermillion};
+      outline-offset: 3px;
+    }
+    .mushi-submit-arrow {
+      display: inline-block;
+      transition: transform 220ms ${easeStamp};
     }
+    .mushi-submit:hover .mushi-submit-arrow { transform: translateX(3px); }
 
-    /* Step indicator dots */
+    /* \u2500\u2500 Step indicator (numeral ledger) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       Replaces the generic three-dots with a typographic series:
+       "01 \u2014 02 \u2014 03". The active step uses serif numerals, the
+       others use mono so the active one literally reads heavier. */
     .mushi-step-indicator {
       display: flex;
+      align-items: center;
       justify-content: center;
-      gap: 6px;
-      padding: 10px;
-    }
-    .mushi-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: ${border};
-      transition: background 0.2s, transform 0.2s;
-    }
-    .mushi-dot.active {
-      background: ${accent};
-      transform: scale(1.3);
-    }
-    .mushi-dot.done {
-      background: ${isDark ? "#a78bfa" : "#8b5cf6"};
+      gap: 8px;
+      padding: 10px 22px 14px;
+      color: ${inkFaint};
+      font-family: ${fontMono};
+      font-size: 11px;
+      letter-spacing: 0.10em;
+    }
+    .mushi-step-num {
+      display: inline-flex;
+      align-items: baseline;
+      gap: 4px;
+      transition: color 200ms ${easeStamp};
+    }
+    .mushi-step-num.done { color: ${inkMuted}; text-decoration: line-through; text-decoration-color: ${inkFaint}; }
+    .mushi-step-num.active {
+      color: ${vermillion};
+      font-family: ${fontDisplay};
+      font-size: 14px;
+      font-weight: 600;
+      letter-spacing: 0;
     }
+    .mushi-step-sep { width: 14px; height: 1px; background: ${rule}; }
 
-    /* Success */
+    /* \u2500\u2500 Success: \u6731\u5370 stamp animation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       The success state is the signature moment. A vermillion ring
+       scribes itself, then a "RECEIVED" mono-caps label fades in at
+       the centre, evoking a hanko being pressed onto the form. */
     .mushi-success {
       text-align: center;
-      padding: 32px 16px;
+      padding: 28px 16px 20px;
+    }
+    .mushi-success-stamp {
+      position: relative;
+      width: 96px;
+      height: 96px;
+      margin: 0 auto 16px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .mushi-success-stamp svg {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .mushi-success-stamp circle {
+      fill: none;
+      stroke: ${vermillion};
+      stroke-width: 3;
+      stroke-dasharray: 280;
+      stroke-dashoffset: 280;
+      transform: rotate(-90deg);
+      transform-origin: center;
+      animation: mushi-stamp-ring 700ms ${easeStamp} 80ms forwards;
+    }
+    .mushi-success-stamp-label {
+      font-family: ${fontDisplay};
+      font-size: 18px;
+      font-weight: 600;
+      color: ${vermillion};
+      letter-spacing: 0.04em;
+      transform: rotate(-6deg);
+      opacity: 0;
+      animation: mushi-stamp-press 360ms ${easeStamp} 600ms forwards;
+    }
+    .mushi-success-headline {
+      font-family: ${fontDisplay};
+      font-size: 18px;
+      font-weight: 500;
+      color: ${ink};
+      margin-bottom: 4px;
     }
-    .mushi-success-icon {
-      font-size: 40px;
-      margin-bottom: 12px;
+    .mushi-success-meta {
+      font-family: ${fontMono};
+      font-size: 11px;
+      letter-spacing: 0.10em;
+      text-transform: uppercase;
+      color: ${inkMuted};
     }
-    .mushi-success p {
-      color: ${textMuted};
-      font-size: 14px;
+
+    @keyframes mushi-stamp-ring {
+      to { stroke-dashoffset: 0; }
+    }
+    @keyframes mushi-stamp-press {
+      0%   { opacity: 0; transform: rotate(-6deg) scale(1.3); }
+      60%  { opacity: 1; transform: rotate(-6deg) scale(0.94); }
+      100% { opacity: 1; transform: rotate(-6deg) scale(1); }
     }
 
-    /* Error */
+    /* \u2500\u2500 Error \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       Inline editorial note rather than a red box. Vermillion left
+       rule keeps the same accent language. */
     .mushi-error {
-      color: #ef4444;
+      margin-top: 10px;
+      padding: 8px 0 8px 10px;
+      border-left: 2px solid ${vermillion};
+      color: ${vermillion};
       font-size: 12px;
-      margin-top: 8px;
+      font-family: ${fontMono};
+      letter-spacing: 0.02em;
+    }
+
+    /* \u2500\u2500 Reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       Honour the OS preference: kill every transition + animation
+       except the focus underline (which is critical feedback). */
+    @media (prefers-reduced-motion: reduce) {
+      *,
+      *::before,
+      *::after {
+        animation-duration: 0.001ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.001ms !important;
+      }
+      .mushi-success-stamp circle { stroke-dashoffset: 0; }
+      .mushi-success-stamp-label { opacity: 1; }
     }
   `;
 }
@@ -516,6 +829,18 @@ var CATEGORY_ICONS = {
   confusing: "\u{1F615}",
   other: "\u{1F4DD}"
 };
+function pad2(n) {
+  return n < 10 ? `0${n}` : String(n);
+}
+var TOTAL_STEPS = 3;
+var STEP_NUMBER = {
+  category: 1,
+  intent: 2,
+  details: 3
+};
+function isSubmitShortcut(e) {
+  return (e.metaKey || e.ctrlKey) && e.key === "Enter";
+}
 var MushiWidget = class {
   host;
   shadow;
@@ -529,11 +854,28 @@ var MushiWidget = class {
   screenshotAttached = false;
   elementSelected = false;
   submitting = false;
+  /** Captured at the moment of submit so the success ledger metadata
+   *  ("REPORT · 14:23:07 JST") doesn't drift while the success step
+   *  is on screen. */
+  submittedAt = null;
+  /** Pending success-state + auto-close timers. Tracked so destroy()
+   *  can clear them — otherwise a host that unmounts mid-submit leaks
+   *  this MushiWidget reference (and re-renders into a detached shadow
+   *  root) for up to ~3.3s after destroy. */
+  successTimer = null;
+  autoCloseTimer = null;
   constructor(config = {}, callbacks) {
     this.config = {
       position: config.position ?? "bottom-right",
       theme: config.theme ?? "auto",
-      triggerText: config.triggerText ?? "\u{1F41B}",
+      // Falsy-OR (NOT `??`) on purpose: `triggerText: ''` is semantically
+      // nonsense — it would render a labelless, glyphless trigger button
+      // that users can't see or aim at. Treat empty string the same as
+      // omitted so any caller that wires this to a cleared form input or
+      // pastes a legacy snippet that emitted `triggerText: ""` (see
+      // apps/admin/src/lib/sdkSnippets.ts widgetLines history) still gets
+      // the default 🐛 and a visible button.
+      triggerText: config.triggerText || "\u{1F41B}",
       expandedTitle: config.expandedTitle ?? "",
       mode: config.mode ?? "conversational",
       locale: config.locale ?? "auto",
@@ -555,6 +897,7 @@ var MushiWidget = class {
     this.screenshotAttached = false;
     this.elementSelected = false;
     this.submitting = false;
+    this.submittedAt = null;
     if (options?.category) {
       this.selectedCategory = options.category;
       this.selectedIntent = null;
@@ -585,6 +928,14 @@ var MushiWidget = class {
     if (this.isOpen) this.render();
   }
   destroy() {
+    if (this.successTimer !== null) {
+      clearTimeout(this.successTimer);
+      this.successTimer = null;
+    }
+    if (this.autoCloseTimer !== null) {
+      clearTimeout(this.autoCloseTimer);
+      this.autoCloseTimer = null;
+    }
     this.host.remove();
   }
   getTheme() {
@@ -606,6 +957,8 @@ var MushiWidget = class {
     trigger.className = `mushi-trigger ${pos}`;
     trigger.textContent = this.config.triggerText;
     trigger.setAttribute("aria-label", t.widget.trigger);
+    trigger.setAttribute("aria-haspopup", "dialog");
+    trigger.setAttribute("aria-expanded", String(this.isOpen));
     trigger.style.zIndex = String(this.config.zIndex);
     trigger.addEventListener("click", () => {
       if (this.isOpen) this.close();
@@ -615,6 +968,7 @@ var MushiWidget = class {
     const panel = document.createElement("div");
     panel.className = `mushi-panel ${pos}${this.isOpen ? " open" : " closed"}`;
     panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-modal", "true");
     panel.setAttribute("aria-label", t.widget.title);
     panel.style.zIndex = String(this.config.zIndex + 1);
     if (this.isOpen) {
@@ -636,37 +990,67 @@ var MushiWidget = class {
         return this.renderSuccessStep();
     }
   }
-  renderHeader(title, showBack = false) {
+  /**
+   * Editorial masthead. Always carries:
+   *   • the brand mark (虫 kanji on vermillion, "MUSHI" in mono above)
+   *   • the page title (serif display)
+   *   • the close affordance
+   *
+   * On sub-steps it additionally renders a back button (replacing the
+   * "MUSHI" eyebrow with a "← BACK" mono link) and a step counter
+   * ledger ("02 / 03") on the far right.
+   */
+  renderHeader(opts) {
     const t = this.locale;
+    const { title, showBack = false, step, eyebrow } = opts;
+    const eyebrowHtml = showBack ? `<button type="button" class="mushi-back" data-action="back" aria-label="${t.widget.back}">\u2190 ${t.widget.back}</button>` : `<span class="mushi-header-eyebrow">${eyebrow ?? "Mushi \xB7 Report"}</span>`;
+    const counterHtml = step ? `<span class="mushi-step-counter" aria-label="Step ${step} of ${TOTAL_STEPS}"><b>${pad2(step)}</b> / ${pad2(TOTAL_STEPS)}</span>` : "";
     return `
       <div class="mushi-header">
-        ${showBack ? `<button class="mushi-back" data-action="back" aria-label="${t.widget.back}">\u2190</button>` : ""}
-        <h3>${title}</h3>
-        <button class="mushi-close" data-action="close" aria-label="${t.widget.close}">\u2715</button>
+        <div class="mushi-header-mark" aria-hidden="true">\u866B</div>
+        <div class="mushi-header-titles">
+          ${eyebrowHtml}
+          <h3>${title}</h3>
+        </div>
+        <div class="mushi-header-meta">
+          ${counterHtml}
+          <button type="button" class="mushi-close" data-action="close" aria-label="${t.widget.close}">\u2715</button>
+        </div>
       </div>
     `;
   }
+  /**
+   * Numeral step indicator: "01 — 02 — 03", with the active step in
+   * vermillion serif and completed steps struck through in mono.
+   * Replaces the original three-dot indicator (a generic SaaS pattern).
+   */
+  renderStepIndicator(currentStep) {
+    const segments = [];
+    for (let i = 1; i <= TOTAL_STEPS; i++) {
+      const cls = i < currentStep ? "mushi-step-num done" : i === currentStep ? "mushi-step-num active" : "mushi-step-num";
+      segments.push(`<span class="${cls}">${pad2(i)}</span>`);
+      if (i < TOTAL_STEPS) segments.push('<span class="mushi-step-sep" aria-hidden="true"></span>');
+    }
+    return `<div class="mushi-step-indicator" aria-hidden="true">${segments.join("")}</div>`;
+  }
   renderCategoryStep() {
     const t = this.locale;
     const categories = ["bug", "slow", "visual", "confusing", "other"].map((id) => `
-        <button class="mushi-option-btn" data-category="${id}" role="radio" aria-checked="false">
-          <span class="mushi-option-icon">${CATEGORY_ICONS[id]}</span>
+        <button type="button" class="mushi-option-btn" data-category="${id}" role="radio" aria-checked="false">
+          <span class="mushi-option-icon" aria-hidden="true">${CATEGORY_ICONS[id]}</span>
           <div class="mushi-option-text">
             <span class="mushi-option-label">${t.step1.categories[id]}</span>
             <span class="mushi-option-desc">${t.step1.categoryDescriptions[id]}</span>
           </div>
+          <span class="mushi-option-arrow" aria-hidden="true">\u2192</span>
         </button>
       `).join("");
     return `
-      ${this.renderHeader(t.step1.heading)}
+      ${this.renderHeader({ title: t.step1.heading, step: STEP_NUMBER.category })}
       <div class="mushi-body" role="radiogroup" aria-label="${t.step1.heading}">
         ${categories}
       </div>
-      <div class="mushi-step-indicator">
-        <span class="mushi-dot active"></span>
-        <span class="mushi-dot"></span>
-        <span class="mushi-dot"></span>
-      </div>
+      ${this.renderStepIndicator(STEP_NUMBER.category)}
     `;
   }
   renderIntentStep() {
@@ -674,32 +1058,28 @@ var MushiWidget = class {
     const cat = this.selectedCategory;
     const intents = t.step2.intents[cat] || [];
     const options = intents.map((intent) => `
-      <button class="mushi-intent-btn" data-intent="${intent}">
+      <button type="button" class="mushi-intent-btn" data-intent="${intent}">
         ${intent}
       </button>
     `).join("");
     return `
-      ${this.renderHeader(t.step2.heading, true)}
+      ${this.renderHeader({ title: t.step2.heading, showBack: true, step: STEP_NUMBER.intent })}
       <div class="mushi-body">
         <div class="mushi-selected-category">
-          <span>${CATEGORY_ICONS[cat]}</span>
+          <span aria-hidden="true">${CATEGORY_ICONS[cat]}</span>
           <span>${t.step1.categories[cat]}</span>
         </div>
         <div class="mushi-intents">
           ${options}
         </div>
       </div>
-      <div class="mushi-step-indicator">
-        <span class="mushi-dot done"></span>
-        <span class="mushi-dot active"></span>
-        <span class="mushi-dot"></span>
-      </div>
+      ${this.renderStepIndicator(STEP_NUMBER.intent)}
     `;
   }
   renderDetailsStep() {
     const t = this.locale;
     return `
-      ${this.renderHeader(t.step3.heading, true)}
+      ${this.renderHeader({ title: t.step3.heading, showBack: true, step: STEP_NUMBER.details })}
       <div class="mushi-body">
         <textarea
           class="mushi-textarea"
@@ -709,35 +1089,47 @@ var MushiWidget = class {
           autofocus
         ></textarea>
         <div class="mushi-attachments">
-          <button class="mushi-attach-btn${this.screenshotAttached ? " active" : ""}" data-action="screenshot">
+          <button type="button" class="mushi-attach-btn${this.screenshotAttached ? " active" : ""}" data-action="screenshot">
             \u{1F4F8} ${this.screenshotAttached ? t.step3.screenshotAttached : t.step3.screenshotButton}
           </button>
-          <button class="mushi-attach-btn${this.elementSelected ? " active" : ""}" data-action="element">
+          <button type="button" class="mushi-attach-btn${this.elementSelected ? " active" : ""}" data-action="element">
             \u{1F3AF} ${this.elementSelected ? t.step3.elementSelected : t.step3.elementButton}
           </button>
         </div>
         <div class="mushi-error" style="display:none" role="alert"></div>
       </div>
       <div class="mushi-footer">
-        <button class="mushi-submit" data-action="submit"${this.submitting ? " disabled" : ""}>
-          ${this.submitting ? t.widget.submitting : t.widget.submit}
+        <span class="mushi-footer-hint" aria-hidden="true">\u2318 + ENTER \u2192 send</span>
+        <button type="button" class="mushi-submit" data-action="submit"${this.submitting ? " disabled" : ""}>
+          <span>${this.submitting ? t.widget.submitting : t.widget.submit}</span>
+          <span class="mushi-submit-arrow" aria-hidden="true">\u2192</span>
         </button>
       </div>
-      <div class="mushi-step-indicator">
-        <span class="mushi-dot done"></span>
-        <span class="mushi-dot done"></span>
-        <span class="mushi-dot active"></span>
-      </div>
+      ${this.renderStepIndicator(STEP_NUMBER.details)}
     `;
   }
+  /**
+   * Editorial success state: 朱印-style red stamp ring with the kanji
+   * 受 ("received") at its centre, the localised "thank you" string
+   * in serif below, and a mono ledger receipt ("REPORT · HH:MM:SS").
+   * The ring + label animations are defined in styles.ts so this stays
+   * pure markup and `prefers-reduced-motion` flips them to the final
+   * frame instantly.
+   */
   renderSuccessStep() {
     const t = this.locale;
+    const stamp = this.submittedAt ?? /* @__PURE__ */ new Date();
+    const time = stamp.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
     return `
-      ${this.renderHeader(t.widget.title)}
+      ${this.renderHeader({ title: t.widget.title, eyebrow: "Mushi \xB7 Receipt" })}
       <div class="mushi-body">
         <div class="mushi-success">
-          <div class="mushi-success-icon">\u2705</div>
-          <p>${t.widget.submitted}</p>
+          <div class="mushi-success-stamp" aria-hidden="true">
+            <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><circle cx="50" cy="50" r="44"/></svg>
+            <span class="mushi-success-stamp-label">\u53D7</span>
+          </div>
+          <div class="mushi-success-headline">${t.widget.submitted}</div>
+          <div class="mushi-success-meta">REPORT \xB7 ${time}</div>
         </div>
       </div>
     `;
@@ -775,7 +1167,7 @@ var MushiWidget = class {
     panel.querySelector('[data-action="element"]')?.addEventListener("click", () => {
       this.callbacks.onElementSelectorRequest?.();
     });
-    panel.querySelector('[data-action="submit"]')?.addEventListener("click", () => {
+    const submitReport = () => {
       const textarea = panel.querySelector(".mushi-textarea");
       const description = textarea?.value?.trim() ?? "";
       const errorEl = panel.querySelector(".mushi-error");
@@ -788,27 +1180,43 @@ var MushiWidget = class {
         return;
       }
       this.submitting = true;
+      this.submittedAt = /* @__PURE__ */ new Date();
       this.render();
       this.callbacks.onSubmit({
         category: this.selectedCategory,
         description,
         intent: this.selectedIntent ?? void 0
       });
-      setTimeout(() => {
+      this.successTimer = setTimeout(() => {
+        this.successTimer = null;
         this.submitting = false;
         this.step = "success";
         this.render();
-        setTimeout(() => {
+        this.autoCloseTimer = setTimeout(() => {
+          this.autoCloseTimer = null;
           if (this.step === "success") this.close();
-        }, 2500);
+        }, 2800);
       }, 500);
-    });
+    };
+    panel.querySelector('[data-action="submit"]')?.addEventListener("click", submitReport);
     panel.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") this.close();
+      if (e.key === "Escape") {
+        this.close();
+        return;
+      }
+      if (this.step === "details" && isSubmitShortcut(e)) {
+        e.preventDefault();
+        submitReport();
+      }
     });
   }
   trapFocus(panel) {
     requestAnimationFrame(() => {
+      const textarea = panel.querySelector("textarea");
+      if (textarea) {
+        textarea.focus();
+        return;
+      }
       const focusable = panel.querySelectorAll("button, textarea, [tabindex]");
       if (focusable.length > 0) focusable[0].focus();
     });