sakana-element 2.2.0 → 2.4.0

package/dist/theme/Card.css

@@ -1,15 +1,19 @@
 /* Card Variables */
-.px-card[data-v-61d3ab66] {
+.px-card[data-v-f3900769] {
   --px-card-bg-color: var(--px-bg-color);
   --px-card-border-color: var(--px-border-color);
   --px-card-shadow-color: var(--px-shadow-color);
   --px-card-text-color: var(--px-text-color-primary);
   --px-card-header-border-color: var(--px-border-color-light);
   --px-card-footer-border-color: var(--px-border-color-light);
-  --px-card-padding: 16px;
+  --px-card-padding: 16px;
+
+  /* Beveled inset for 3D raised-panel depth */
+  --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+  --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
 }
 /* Base Card Styles - Pixel Game Aesthetic */
-.px-card[data-v-61d3ab66] {
+.px-card[data-v-f3900769] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -22,242 +26,322 @@
   overflow: hidden;
   transition: none;
 }
-/* Border layer — filled with border color, clipped to pixel shape */
-.px-card[data-v-61d3ab66]::before {
+/* Border layer — 3-step staircase clip (8px corners) */
+.px-card[data-v-f3900769]::before {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--px-card-border-color);
     clip-path: polygon(
-      0 2px, 2px 2px, 2px 0,
-      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
-      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
-      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+      0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
+      calc(100% - 8px) 0, calc(100% - 8px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 8px, 100% 8px,
+      100% calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) 100%,
+      8px 100%, 8px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 8px), 0 calc(100% - 8px)
     );
     z-index: 0;
 }
-/* Fill layer — inset by border width, filled with bg color */
-.px-card[data-v-61d3ab66]::after {
+/* Fill layer — 4px inset, 2-step staircase (double staircase effect), beveled */
+.px-card[data-v-f3900769]::after {
     content: '';
     position: absolute;
-    inset: 2px;
+    inset: 4px;
     background: var(--px-card-bg-color);
     clip-path: polygon(
-      0 2px, 2px 2px, 2px 0,
-      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
-      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
-      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+      0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
+      calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
+      100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
+      4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
     );
+    box-shadow: var(--px-card-inset-highlight), var(--px-card-inset-shadow);
     z-index: 0;
 }
 /* Card sections - all above pseudo-elements */
-.px-card__header[data-v-61d3ab66] {
+.px-card__header[data-v-f3900769] {
   position: relative;
   z-index: 1;
   padding: var(--px-card-padding);
-  border-bottom: 2px solid var(--px-card-header-border-color);
+  border-bottom: none;
   font-weight: 600;
-}
-.px-card__body[data-v-61d3ab66] {
+}
+/* Pixel-dashed divider at bottom */
+.px-card__header[data-v-f3900769]::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 4px;
+    right: 4px;
+    height: 2px;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-card-header-border-color) 0px,
+      var(--px-card-header-border-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
+}
+.px-card__body[data-v-f3900769] {
   position: relative;
   z-index: 1;
   padding: var(--px-card-padding);
   flex: 1;
 }
-.px-card__footer[data-v-61d3ab66] {
+.px-card__footer[data-v-f3900769] {
   position: relative;
   z-index: 1;
   padding: var(--px-card-padding);
-  border-top: 2px solid var(--px-card-footer-border-color);
+  border-top: none;
+}
+/* Pixel-dashed divider at top */
+.px-card__footer[data-v-f3900769]::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 4px;
+    right: 4px;
+    height: 2px;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-card-footer-border-color) 0px,
+      var(--px-card-footer-border-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
 }
 /* Shadow variants */
-.px-card--shadow-always[data-v-61d3ab66] {
+.px-card--shadow-always[data-v-f3900769] {
   filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
 }
-.px-card--shadow-hover[data-v-61d3ab66] {
+.px-card--shadow-hover[data-v-f3900769] {
   filter: none;
 }
-.px-card--shadow-hover[data-v-61d3ab66]:hover {
+.px-card--shadow-hover[data-v-f3900769]:hover {
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
 }
-.px-card--shadow-never[data-v-61d3ab66] {
+.px-card--shadow-never[data-v-f3900769] {
   filter: none;
 }
-/* Hoverable interaction */
-.px-card.is-hoverable[data-v-61d3ab66] {
+/* Hoverable interaction — pixel-style diagonal lift/press */
+.px-card.is-hoverable[data-v-f3900769] {
   cursor: pointer;
 }
-.px-card.is-hoverable[data-v-61d3ab66]:hover {
-    transform: translateY(-4px);
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
+.px-card.is-hoverable[data-v-f3900769]:hover {
+    transform: translate(-2px, -2px);
+    filter: drop-shadow(5px 5px 0px var(--px-card-shadow-color));
 }
-.px-card.is-hoverable[data-v-61d3ab66]:active {
-    transform: translateY(0);
+.px-card.is-hoverable[data-v-f3900769]:active {
+    transform: translate(1px, 1px);
+    filter: drop-shadow(1px 1px 0px var(--px-card-shadow-color));
 }
 /* Size variants */
-.px-card--small[data-v-61d3ab66] {
+.px-card--small[data-v-f3900769] {
   --px-card-padding: 12px;
   font-size: var(--px-font-size-small);
   filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
 }
-.px-card--small.px-card--shadow-hover[data-v-61d3ab66] { filter: none;
+.px-card--small.px-card--shadow-hover[data-v-f3900769] { filter: none;
 }
-.px-card--small.px-card--shadow-hover[data-v-61d3ab66]:hover { filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
+.px-card--small.px-card--shadow-hover[data-v-f3900769]:hover { filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
 }
-.px-card--small.px-card--shadow-never[data-v-61d3ab66] { filter: none;
+.px-card--small.px-card--shadow-never[data-v-f3900769] { filter: none;
 }
-.px-card--large[data-v-61d3ab66] {
+.px-card--large[data-v-f3900769] {
   --px-card-padding: 20px;
   font-size: var(--px-font-size-large);
 }
 /* Type variants */
-.px-card--primary[data-v-61d3ab66] {
+.px-card--primary[data-v-f3900769] {
     --px-card-bg-color: var(--px-color-primary-light-9);
     --px-card-border-color: var(--px-color-primary);
     --px-card-shadow-color: var(--px-color-primary-dark);
     --px-card-text-color: var(--px-text-color-primary);
     --px-card-header-border-color: var(--px-color-primary);
-    --px-card-footer-border-color: var(--px-color-primary);
+    --px-card-footer-border-color: var(--px-color-primary);
+    --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
+    --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
 }
-.px-card--primary.is-outline[data-v-61d3ab66] {
+.px-card--primary.is-outline[data-v-f3900769] {
     --px-card-bg-color: transparent;
     --px-card-border-color: var(--px-color-primary);
-    --px-card-text-color: var(--px-color-primary);
+    --px-card-text-color: var(--px-color-primary);
+    --px-card-inset-highlight: none;
+    --px-card-inset-shadow: none;
 }
-.px-card--primary.is-dash[data-v-61d3ab66] {
+.px-card--primary.is-dash[data-v-f3900769] {
     --px-card-bg-color: var(--px-color-primary-light-9);
     --px-card-border-color: var(--px-color-primary);
     --px-card-text-color: var(--px-color-primary);
 }
-.px-card--primary.is-ghost[data-v-61d3ab66] {
+.px-card--primary.is-ghost[data-v-f3900769] {
     --px-card-bg-color: transparent;
     --px-card-border-color: transparent;
     --px-card-shadow-color: transparent;
-    --px-card-text-color: var(--px-color-primary);
+    --px-card-text-color: var(--px-color-primary);
+    --px-card-inset-highlight: none;
+    --px-card-inset-shadow: none;
 }
-.px-card--success[data-v-61d3ab66] {
+.px-card--success[data-v-f3900769] {
     --px-card-bg-color: var(--px-color-success-light-9);
     --px-card-border-color: var(--px-color-success);
     --px-card-shadow-color: var(--px-color-success-dark);
     --px-card-text-color: var(--px-text-color-primary);
     --px-card-header-border-color: var(--px-color-success);
-    --px-card-footer-border-color: var(--px-color-success);
+    --px-card-footer-border-color: var(--px-color-success);
+    --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
+    --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
 }
-.px-card--success.is-outline[data-v-61d3ab66] {
+.px-card--success.is-outline[data-v-f3900769] {
     --px-card-bg-color: transparent;
     --px-card-border-color: var(--px-color-success);
-    --px-card-text-color: var(--px-color-success);
+    --px-card-text-color: var(--px-color-success);
+    --px-card-inset-highlight: none;
+    --px-card-inset-shadow: none;
 }
-.px-card--success.is-dash[data-v-61d3ab66] {
+.px-card--success.is-dash[data-v-f3900769] {
     --px-card-bg-color: var(--px-color-success-light-9);
     --px-card-border-color: var(--px-color-success);
     --px-card-text-color: var(--px-color-success);
 }
-.px-card--success.is-ghost[data-v-61d3ab66] {
+.px-card--success.is-ghost[data-v-f3900769] {
     --px-card-bg-color: transparent;
     --px-card-border-color: transparent;
     --px-card-shadow-color: transparent;
-    --px-card-text-color: var(--px-color-success);
+    --px-card-text-color: var(--px-color-success);
+    --px-card-inset-highlight: none;
+    --px-card-inset-shadow: none;
 }
-.px-card--info[data-v-61d3ab66] {
+.px-card--info[data-v-f3900769] {
     --px-card-bg-color: var(--px-color-info-light-9);
     --px-card-border-color: var(--px-color-info);
     --px-card-shadow-color: var(--px-color-info-dark);
     --px-card-text-color: var(--px-text-color-primary);
     --px-card-header-border-color: var(--px-color-info);
-    --px-card-footer-border-color: var(--px-color-info);
+    --px-card-footer-border-color: var(--px-color-info);
+    --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
+    --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
 }
-.px-card--info.is-outline[data-v-61d3ab66] {
+.px-card--info.is-outline[data-v-f3900769] {
     --px-card-bg-color: transparent;
     --px-card-border-color: var(--px-color-info);
-    --px-card-text-color: var(--px-color-info);
+    --px-card-text-color: var(--px-color-info);
+    --px-card-inset-highlight: none;
+    --px-card-inset-shadow: none;
 }
-.px-card--info.is-dash[data-v-61d3ab66] {
+.px-card--info.is-dash[data-v-f3900769] {
     --px-card-bg-color: var(--px-color-info-light-9);
     --px-card-border-color: var(--px-color-info);
     --px-card-text-color: var(--px-color-info);
 }
-.px-card--info.is-ghost[data-v-61d3ab66] {
+.px-card--info.is-ghost[data-v-f3900769] {
     --px-card-bg-color: transparent;
     --px-card-border-color: transparent;
     --px-card-shadow-color: transparent;
-    --px-card-text-color: var(--px-color-info);
+    --px-card-text-color: var(--px-color-info);
+    --px-card-inset-highlight: none;
+    --px-card-inset-shadow: none;
 }
-.px-card--warning[data-v-61d3ab66] {
+.px-card--warning[data-v-f3900769] {
     --px-card-bg-color: var(--px-color-warning-light-9);
     --px-card-border-color: var(--px-color-warning);
     --px-card-shadow-color: var(--px-color-warning-dark);
     --px-card-text-color: var(--px-text-color-primary);
     --px-card-header-border-color: var(--px-color-warning);
-    --px-card-footer-border-color: var(--px-color-warning);
+    --px-card-footer-border-color: var(--px-color-warning);
+    --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
+    --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
 }
-.px-card--warning.is-outline[data-v-61d3ab66] {
+.px-card--warning.is-outline[data-v-f3900769] {
     --px-card-bg-color: transparent;
     --px-card-border-color: var(--px-color-warning);
-    --px-card-text-color: var(--px-color-warning);
+    --px-card-text-color: var(--px-color-warning);
+    --px-card-inset-highlight: none;
+    --px-card-inset-shadow: none;
 }
-.px-card--warning.is-dash[data-v-61d3ab66] {
+.px-card--warning.is-dash[data-v-f3900769] {
     --px-card-bg-color: var(--px-color-warning-light-9);
     --px-card-border-color: var(--px-color-warning);
     --px-card-text-color: var(--px-color-warning);
 }
-.px-card--warning.is-ghost[data-v-61d3ab66] {
+.px-card--warning.is-ghost[data-v-f3900769] {
     --px-card-bg-color: transparent;
     --px-card-border-color: transparent;
     --px-card-shadow-color: transparent;
-    --px-card-text-color: var(--px-color-warning);
+    --px-card-text-color: var(--px-color-warning);
+    --px-card-inset-highlight: none;
+    --px-card-inset-shadow: none;
 }
-.px-card--danger[data-v-61d3ab66] {
+.px-card--danger[data-v-f3900769] {
     --px-card-bg-color: var(--px-color-danger-light-9);
     --px-card-border-color: var(--px-color-danger);
     --px-card-shadow-color: var(--px-color-danger-dark);
     --px-card-text-color: var(--px-text-color-primary);
     --px-card-header-border-color: var(--px-color-danger);
-    --px-card-footer-border-color: var(--px-color-danger);
+    --px-card-footer-border-color: var(--px-color-danger);
+    --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
+    --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
 }
-.px-card--danger.is-outline[data-v-61d3ab66] {
+.px-card--danger.is-outline[data-v-f3900769] {
     --px-card-bg-color: transparent;
     --px-card-border-color: var(--px-color-danger);
-    --px-card-text-color: var(--px-color-danger);
+    --px-card-text-color: var(--px-color-danger);
+    --px-card-inset-highlight: none;
+    --px-card-inset-shadow: none;
 }
-.px-card--danger.is-dash[data-v-61d3ab66] {
+.px-card--danger.is-dash[data-v-f3900769] {
     --px-card-bg-color: var(--px-color-danger-light-9);
     --px-card-border-color: var(--px-color-danger);
     --px-card-text-color: var(--px-color-danger);
 }
-.px-card--danger.is-ghost[data-v-61d3ab66] {
+.px-card--danger.is-ghost[data-v-f3900769] {
     --px-card-bg-color: transparent;
     --px-card-border-color: transparent;
     --px-card-shadow-color: transparent;
-    --px-card-text-color: var(--px-color-danger);
+    --px-card-text-color: var(--px-color-danger);
+    --px-card-inset-highlight: none;
+    --px-card-inset-shadow: none;
 }
-/* Outline variant */
-.px-card.is-outline[data-v-61d3ab66] {
-  border: 2px solid var(--px-card-border-color);
+/* Outline variant — pixel-cornered wireframe, no fill, no bevel */
+.px-card.is-outline[data-v-f3900769] {
   filter: none;
 }
-.px-card.is-outline[data-v-61d3ab66]::before { display: none;
-}
-.px-card.is-outline[data-v-61d3ab66]::after {
-    clip-path: none;
-    inset: 0;
-    background: var(--px-card-bg-color);
+.px-card.is-outline[data-v-f3900769]::before {
+    background:
+      /* Top edge */
+      linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 0 0 / 100% 4px no-repeat,
+      /* Bottom edge */
+      linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 0 100% / 100% 4px no-repeat,
+      /* Left edge */
+      linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 0 0 / 4px 100% no-repeat,
+      /* Right edge */
+      linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 100% 0 / 4px 100% no-repeat;
+    /* clip-path inherited from base → pixel staircase corners preserved */
+}
+.px-card.is-outline[data-v-f3900769]::after {
+    background: transparent;
+    box-shadow: none;
 }
-/* Dash variant */
-.px-card.is-dash[data-v-61d3ab66] {
-  border: 2px dashed var(--px-card-border-color);
+/* Dash variant — pixel-art dashed border via repeating gradients */
+.px-card.is-dash[data-v-f3900769] {
   filter: none;
 }
-.px-card.is-dash[data-v-61d3ab66]::before { display: none;
-}
-.px-card.is-dash[data-v-61d3ab66]::after {
-    clip-path: none;
-    inset: 0;
-    background: var(--px-card-bg-color);
+.px-card.is-dash[data-v-f3900769]::before {
+    background:
+      /* Top edge */
+      repeating-linear-gradient(to right, var(--px-card-border-color) 0 8px, transparent 8px 16px) 0 0 / 100% 4px no-repeat,
+      /* Bottom edge */
+      repeating-linear-gradient(to right, var(--px-card-border-color) 0 8px, transparent 8px 16px) 0 100% / 100% 4px no-repeat,
+      /* Left edge */
+      repeating-linear-gradient(to bottom, var(--px-card-border-color) 0 8px, transparent 8px 16px) 0 0 / 4px 100% no-repeat,
+      /* Right edge */
+      repeating-linear-gradient(to bottom, var(--px-card-border-color) 0 8px, transparent 8px 16px) 100% 0 / 4px 100% no-repeat;
+    /* Inherits clip-path from base → pixel corners on dashes */
+}
+.px-card.is-dash[data-v-f3900769]::after {
+    background: transparent;
+    box-shadow: none;
 }
 /* Ghost variant */
-.px-card.is-ghost[data-v-61d3ab66] {
+.px-card.is-ghost[data-v-f3900769] {
   filter: none;
 }
-.px-card.is-ghost[data-v-61d3ab66]::before, .px-card.is-ghost[data-v-61d3ab66]::after { display: none;
+.px-card.is-ghost[data-v-f3900769]::before, .px-card.is-ghost[data-v-f3900769]::after { display: none;
 }

package/dist/theme/ChatBubble.css

@@ -0,0 +1,218 @@
+/* ChatBubble Variables */
+.px-chat[data-v-c022026d] {
+  --px-chat-bubble-bg-color: var(--px-fill-color-light);
+  --px-chat-bubble-text-color: var(--px-text-color-primary);
+  --px-chat-bubble-border-color: var(--px-border-color);
+  --px-chat-bubble-shadow-color: var(--px-shadow-color);
+  --px-chat-header-color: var(--px-text-color-secondary);
+  --px-chat-footer-color: var(--px-text-color-placeholder);
+
+  /* Beveled inset for 3D raised-bubble depth */
+  --px-chat-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
+  --px-chat-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.06);
+}
+/* Base ChatBubble Styles - Pixel Game Aesthetic */
+.px-chat[data-v-c022026d] {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-family: var(--px-font-family);
+  font-size: var(--px-font-size-base);
+  box-sizing: border-box;
+  transition: none;
+}
+/* Placement variants */
+.px-chat--start[data-v-c022026d] {
+  flex-direction: row;
+}
+.px-chat--start .px-chat__header[data-v-c022026d] {
+    text-align: left;
+}
+.px-chat--start .px-chat__footer[data-v-c022026d] {
+    text-align: left;
+}
+/* Tail pointing left — positioned inside bubble */
+.px-chat--start .px-chat__tail[data-v-c022026d] {
+    left: -6px;
+
+    /* Border layer: 4-step staircase pointing left */
+    background: var(--px-chat-bubble-border-color);
+    clip-path: polygon(
+      6px 0, 8px 0,
+      8px 8px,
+      0 8px, 0 6px,
+      2px 6px, 2px 4px,
+      4px 4px, 4px 2px,
+      6px 2px
+    );
+}
+/* Fill layer */
+.px-chat--start .px-chat__tail[data-v-c022026d]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--px-chat-bubble-bg-color);
+      clip-path: polygon(
+        6px 2px, 8px 2px,
+        8px 6px,
+        4px 6px, 4px 4px,
+        6px 4px
+      );
+}
+.px-chat--end[data-v-c022026d] {
+  flex-direction: row-reverse;
+}
+.px-chat--end .px-chat__header[data-v-c022026d] {
+    text-align: right;
+}
+.px-chat--end .px-chat__footer[data-v-c022026d] {
+    text-align: right;
+}
+/* Tail pointing right — mirror of left */
+.px-chat--end .px-chat__tail[data-v-c022026d] {
+    right: -6px;
+    left: auto;
+
+    /* Border layer: 4-step staircase pointing right */
+    background: var(--px-chat-bubble-border-color);
+    clip-path: polygon(
+      0 0, 2px 0,
+      2px 2px, 4px 2px,
+      4px 4px, 6px 4px,
+      6px 6px, 8px 6px,
+      8px 8px, 0 8px
+    );
+}
+/* Fill layer */
+.px-chat--end .px-chat__tail[data-v-c022026d]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--px-chat-bubble-bg-color);
+      clip-path: polygon(
+        0 2px, 2px 2px,
+        2px 4px, 4px 4px,
+        4px 6px, 0 6px
+      );
+}
+/* Avatar */
+.px-chat__avatar[data-v-c022026d] {
+  flex-shrink: 0;
+}
+/* Content wrapper */
+.px-chat__content[data-v-c022026d] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 80%;
+}
+/* Header */
+.px-chat__header[data-v-c022026d] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--px-font-size-small);
+  color: var(--px-chat-header-color);
+  line-height: 1.2;
+}
+.px-chat__name[data-v-c022026d] {
+  font-weight: 600;
+}
+.px-chat__time[data-v-c022026d] {
+  font-size: var(--px-font-size-extra-small);
+  opacity: 0.7;
+}
+/* Tail — positioned inside bubble (which is position:relative) */
+.px-chat__tail[data-v-c022026d] {
+  position: absolute;
+  top: 8px;
+  width: 8px;
+  height: 8px;
+  z-index: 1;
+}
+/* Bubble — pixel border via pseudo-elements */
+.px-chat__bubble[data-v-c022026d] {
+  position: relative;
+  padding: 8px 12px;
+  color: var(--px-chat-bubble-text-color);
+  background: transparent;
+  border: none;
+  line-height: 1.5;
+  word-break: break-word;
+
+  filter: drop-shadow(2px 2px 0px var(--px-chat-bubble-shadow-color));
+}
+/* Border layer */
+.px-chat__bubble[data-v-c022026d]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-chat-bubble-border-color);
+    clip-path: polygon(
+      0 2px, 2px 2px, 2px 0,
+      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
+      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
+      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+    );
+    z-index: -1;
+}
+/* Fill layer */
+.px-chat__bubble[data-v-c022026d]::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background: var(--px-chat-bubble-bg-color);
+    clip-path: polygon(
+      0 2px, 2px 2px, 2px 0,
+      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
+      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
+      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+    );
+    box-shadow: var(--px-chat-inset-highlight), var(--px-chat-inset-shadow);
+    z-index: -1;
+}
+/* Footer */
+.px-chat__footer[data-v-c022026d] {
+  font-size: var(--px-font-size-extra-small);
+  color: var(--px-chat-footer-color);
+  line-height: 1.2;
+}
+/* Type variants */
+.px-chat--primary[data-v-c022026d] {
+    --px-chat-bubble-text-color: var(--px-color-white);
+    --px-chat-bubble-bg-color: var(--px-color-primary);
+    --px-chat-bubble-border-color: var(--px-color-primary-dark);
+    --px-chat-bubble-shadow-color: var(--px-color-primary-dark);
+}
+.px-chat--success[data-v-c022026d] {
+    --px-chat-bubble-text-color: var(--px-color-white);
+    --px-chat-bubble-bg-color: var(--px-color-success);
+    --px-chat-bubble-border-color: var(--px-color-success-dark);
+    --px-chat-bubble-shadow-color: var(--px-color-success-dark);
+}
+.px-chat--info[data-v-c022026d] {
+    --px-chat-bubble-text-color: var(--px-color-white);
+    --px-chat-bubble-bg-color: var(--px-color-info);
+    --px-chat-bubble-border-color: var(--px-color-info-dark);
+    --px-chat-bubble-shadow-color: var(--px-color-info-dark);
+}
+.px-chat--warning[data-v-c022026d] {
+    --px-chat-bubble-text-color: var(--px-color-white);
+    --px-chat-bubble-bg-color: var(--px-color-warning);
+    --px-chat-bubble-border-color: var(--px-color-warning-dark);
+    --px-chat-bubble-shadow-color: var(--px-color-warning-dark);
+}
+.px-chat--danger[data-v-c022026d] {
+    --px-chat-bubble-text-color: var(--px-color-white);
+    --px-chat-bubble-bg-color: var(--px-color-danger);
+    --px-chat-bubble-border-color: var(--px-color-danger-dark);
+    --px-chat-bubble-shadow-color: var(--px-color-danger-dark);
+}
+/* Dark mode */
+html.dark .px-chat[data-v-c022026d],
+.px-dark .px-chat[data-v-c022026d] {
+  --px-chat-bubble-bg-color: var(--px-fill-color-light);
+  --px-chat-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-chat-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
+}