sakana-element 2.4.2 → 2.5.0

package/dist/theme/Card.css

@@ -1,347 +1 @@
-/* Card Variables */
-.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;
-
-  /* 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-f3900769] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  color: var(--px-card-text-color);
-  font-family: var(--px-font-family);
-  font-size: var(--px-font-size-base);
-  background: transparent;
-  border: none;
-  box-sizing: border-box;
-  overflow: hidden;
-  transition: none;
-}
-/* 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 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 — 4px inset, 2-step staircase (double staircase effect), beveled */
-.px-card[data-v-f3900769]::after {
-    content: '';
-    position: absolute;
-    inset: 4px;
-    background: var(--px-card-bg-color);
-    clip-path: polygon(
-      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-f3900769] {
-  position: relative;
-  z-index: 1;
-  padding: var(--px-card-padding);
-  border-bottom: none;
-  font-weight: 600;
-}
-/* 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-f3900769] {
-  position: relative;
-  z-index: 1;
-  padding: var(--px-card-padding);
-  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-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-f3900769] {
-  filter: none;
-}
-.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-f3900769] {
-  filter: none;
-}
-/* Hoverable interaction — pixel-style diagonal lift/press */
-.px-card.is-hoverable[data-v-f3900769] {
-  cursor: pointer;
-}
-.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-f3900769]:active {
-    transform: translate(1px, 1px);
-    filter: drop-shadow(1px 1px 0px var(--px-card-shadow-color));
-}
-/* Size variants */
-.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-f3900769] { filter: none;
-}
-.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-f3900769] { filter: none;
-}
-.px-card--large[data-v-f3900769] {
-  --px-card-padding: 20px;
-  font-size: var(--px-font-size-large);
-}
-/* Type variants */
-.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-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-f3900769] {
-    --px-card-bg-color: transparent;
-    --px-card-border-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-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-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-inset-highlight: none;
-    --px-card-inset-shadow: none;
-}
-.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-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-f3900769] {
-    --px-card-bg-color: transparent;
-    --px-card-border-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-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-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-inset-highlight: none;
-    --px-card-inset-shadow: none;
-}
-.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-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-f3900769] {
-    --px-card-bg-color: transparent;
-    --px-card-border-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-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-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-inset-highlight: none;
-    --px-card-inset-shadow: none;
-}
-.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-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-f3900769] {
-    --px-card-bg-color: transparent;
-    --px-card-border-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-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-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-inset-highlight: none;
-    --px-card-inset-shadow: none;
-}
-.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-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-f3900769] {
-    --px-card-bg-color: transparent;
-    --px-card-border-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-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-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-inset-highlight: none;
-    --px-card-inset-shadow: none;
-}
-/* Outline variant — pixel-cornered wireframe, no fill, no bevel */
-.px-card.is-outline[data-v-f3900769] {
-  filter: none;
-}
-.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 — pixel-art dashed border via repeating gradients */
-.px-card.is-dash[data-v-f3900769] {
-  filter: none;
-}
-.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-f3900769] {
-  filter: none;
-}
-.px-card.is-ghost[data-v-f3900769]::before, .px-card.is-ghost[data-v-f3900769]::after { display: none;
-}
+.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-inset-highlight:inset 2px 2px 0 0 #ffffff59;--px-card-inset-shadow:inset -2px -2px 0 0 #00000014;color:var(--px-card-text-color);font-family:var(--px-font-family);font-size:var(--px-font-size-base);box-sizing:border-box;background:0 0;border:none;flex-direction:column;transition:none;display:flex;position:relative;overflow:hidden}.px-card[data-v-f3900769]:before{content:"";background:var(--px-card-border-color);clip-path:polygon(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;position:absolute;inset:0}.px-card[data-v-f3900769]:after{content:"";background:var(--px-card-bg-color);clip-path:polygon(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;position:absolute;inset:4px}.px-card__header[data-v-f3900769]{z-index:1;padding:var(--px-card-padding);border-bottom:none;font-weight:600;position:relative}.px-card__header[data-v-f3900769]:after{content:"";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);height:2px;position:absolute;bottom:0;left:4px;right:4px}.px-card__body[data-v-f3900769]{z-index:1;padding:var(--px-card-padding);flex:1;position:relative}.px-card__footer[data-v-f3900769]{z-index:1;padding:var(--px-card-padding);border-top:none;position:relative}.px-card__footer[data-v-f3900769]:before{content:"";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);height:2px;position:absolute;top:0;left:4px;right:4px}.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-f3900769]{filter:none}.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-f3900769]{filter:none}.px-card.is-hoverable[data-v-f3900769]{cursor:pointer}.px-card.is-hoverable[data-v-f3900769]:hover{filter:drop-shadow(5px 5px 0px var(--px-card-shadow-color));transform:translate(-2px,-2px)}.px-card.is-hoverable[data-v-f3900769]:active{filter:drop-shadow(1px 1px 0px var(--px-card-shadow-color));transform:translate(1px,1px)}.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-f3900769]{filter:none}.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-f3900769]{filter:none}.px-card--large[data-v-f3900769]{--px-card-padding:20px;font-size:var(--px-font-size-large)}.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-inset-highlight:inset 2px 2px 0 0 #fff6;--px-card-inset-shadow:inset -2px -2px 0 0 #0000001a}.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-inset-highlight:none;--px-card-inset-shadow:none}.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-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-inset-highlight:none;--px-card-inset-shadow:none}.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-inset-highlight:inset 2px 2px 0 0 #fff6;--px-card-inset-shadow:inset -2px -2px 0 0 #0000001a}.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-inset-highlight:none;--px-card-inset-shadow:none}.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-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-inset-highlight:none;--px-card-inset-shadow:none}.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-inset-highlight:inset 2px 2px 0 0 #fff6;--px-card-inset-shadow:inset -2px -2px 0 0 #0000001a}.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-inset-highlight:none;--px-card-inset-shadow:none}.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-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-inset-highlight:none;--px-card-inset-shadow:none}.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-inset-highlight:inset 2px 2px 0 0 #fff6;--px-card-inset-shadow:inset -2px -2px 0 0 #0000001a}.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-inset-highlight:none;--px-card-inset-shadow:none}.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-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-inset-highlight:none;--px-card-inset-shadow:none}.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-inset-highlight:inset 2px 2px 0 0 #fff6;--px-card-inset-shadow:inset -2px -2px 0 0 #0000001a}.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-inset-highlight:none;--px-card-inset-shadow:none}.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-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-inset-highlight:none;--px-card-inset-shadow:none}.px-card.is-outline[data-v-f3900769]{filter:none}.px-card.is-outline[data-v-f3900769]:before{background: linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 0 0 / 100% 4px no-repeat,  linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 0 100% / 100% 4px no-repeat,  linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 0 0 / 4px 100% no-repeat,  linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 100% 0 / 4px 100% no-repeat}.px-card.is-outline[data-v-f3900769]:after{box-shadow:none;background:0 0}.px-card.is-dash[data-v-f3900769]{filter:none}.px-card.is-dash[data-v-f3900769]:before{background: repeating-linear-gradient(to right, var(--px-card-border-color) 0 8px, transparent 8px 16px) 0 0 / 100% 4px no-repeat,  repeating-linear-gradient(to right, var(--px-card-border-color) 0 8px, transparent 8px 16px) 0 100% / 100% 4px no-repeat,  repeating-linear-gradient(to bottom, var(--px-card-border-color) 0 8px, transparent 8px 16px) 0 0 / 4px 100% no-repeat,  repeating-linear-gradient(to bottom, var(--px-card-border-color) 0 8px, transparent 8px 16px) 100% 0 / 4px 100% no-repeat}.px-card.is-dash[data-v-f3900769]:after{box-shadow:none;background:0 0}.px-card.is-ghost[data-v-f3900769]{filter:none}.px-card.is-ghost[data-v-f3900769]:before,.px-card.is-ghost[data-v-f3900769]:after{display:none}

package/dist/theme/Carousel.css

@@ -0,0 +1 @@
+.px-carousel[data-v-f6cf04ed]{--px-carousel-border-color:var(--px-border-color);--px-carousel-bg-color:var(--px-fill-color-blank);--px-carousel-shadow-color:var(--px-shadow-color);--px-carousel-indicator-color:var(--px-border-color-darker);--px-carousel-indicator-active-color:var(--px-color-primary);--px-carousel-arrow-color:var(--px-text-color-primary);--px-carousel-arrow-bg-color:var(--px-fill-color-blank);--px-carousel-arrow-hover-bg-color:var(--px-fill-color-light);font-family:var(--px-font-family);filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-carousel-shadow-color));background:0 0;border:none;outline:none;position:relative;overflow:visible}.px-carousel[data-v-f6cf04ed]:before{content:"";background:var(--px-carousel-border-color);clip-path:polygon(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));z-index:0;pointer-events:none;position:absolute;inset:0}.px-carousel[data-v-f6cf04ed]:after{content:"";background:var(--px-carousel-bg-color);clip-path:polygon(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));z-index:0;pointer-events:none;position:absolute;inset:2px}.px-carousel__viewport[data-v-f6cf04ed]{z-index:1;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));position:absolute;inset:2px;overflow:hidden}.px-carousel__track[data-v-f6cf04ed]{height:100%;transition:transform .15s steps(3,end);display:flex}.px-carousel.is-vertical .px-carousel__track[data-v-f6cf04ed]{flex-direction:column}.px-carousel-item[data-v-f6cf04ed]{flex-shrink:0;width:100%;height:100%;overflow:hidden}.px-carousel__arrows[data-v-f6cf04ed]{z-index:2;pointer-events:none;position:absolute;inset:0}.px-carousel__arrows.is-hover .px-carousel__arrow[data-v-f6cf04ed]{opacity:0;transition:opacity .1s steps(2,end)}.px-carousel:hover .px-carousel__arrows.is-hover .px-carousel__arrow[data-v-f6cf04ed]{opacity:1}.px-carousel__arrow[data-v-f6cf04ed]{border:2px solid var(--px-carousel-border-color);background:var(--px-carousel-arrow-bg-color);width:28px;height:28px;color:var(--px-carousel-arrow-color);cursor:pointer;pointer-events:auto;z-index:3;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));justify-content:center;align-items:center;padding:0;font-size:14px;display:flex;position:absolute}.px-carousel__arrow[data-v-f6cf04ed]:hover{background:var(--px-carousel-arrow-hover-bg-color)}.px-carousel__arrow[data-v-f6cf04ed]:disabled,.px-carousel__arrow[data-v-f6cf04ed]:disabled:hover{opacity:.4;cursor:not-allowed;background:var(--px-carousel-arrow-bg-color)}.px-carousel__arrow--prev[data-v-f6cf04ed]{top:50%;left:8px;transform:translateY(-50%)}.px-carousel__arrow--next[data-v-f6cf04ed]{top:50%;right:8px;transform:translateY(-50%)}.px-carousel__arrow--prev[data-v-f6cf04ed]:active:not(:disabled),.px-carousel__arrow--next[data-v-f6cf04ed]:active:not(:disabled){transform:translateY(-50%)translate(1px,1px)}.px-carousel.is-vertical .px-carousel__arrow--prev[data-v-f6cf04ed]{top:8px;left:50%;transform:translate(-50%)}.px-carousel.is-vertical .px-carousel__arrow--next[data-v-f6cf04ed]{top:auto;bottom:8px;left:50%;transform:translate(-50%)}.px-carousel.is-vertical .px-carousel__arrow--prev[data-v-f6cf04ed]:active:not(:disabled),.px-carousel.is-vertical .px-carousel__arrow--next[data-v-f6cf04ed]:active:not(:disabled){transform:translate(-50%)translate(1px,1px)}.px-carousel__indicators[data-v-f6cf04ed]{z-index:2;gap:6px;display:flex;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.px-carousel.is-vertical .px-carousel__indicators[data-v-f6cf04ed]{flex-direction:column;inset:50% 8px auto auto;transform:translateY(-50%)}.px-carousel__indicator[data-v-f6cf04ed]{border:2px solid var(--px-carousel-indicator-color);cursor:pointer;background:0 0;width:8px;height:8px;padding:0}.px-carousel__indicator[data-v-f6cf04ed]:hover{background:var(--px-carousel-indicator-color)}.px-carousel__indicator.is-active[data-v-f6cf04ed]{background:var(--px-carousel-indicator-active-color);border-color:var(--px-carousel-indicator-active-color)}.px-carousel--primary[data-v-f6cf04ed]{--px-carousel-border-color:var(--px-color-primary-dark);--px-carousel-shadow-color:var(--px-color-primary-dark);--px-carousel-indicator-active-color:var(--px-color-primary);--px-carousel-arrow-color:var(--px-color-primary)}.px-carousel--success[data-v-f6cf04ed]{--px-carousel-border-color:var(--px-color-success-dark);--px-carousel-shadow-color:var(--px-color-success-dark);--px-carousel-indicator-active-color:var(--px-color-success);--px-carousel-arrow-color:var(--px-color-success)}.px-carousel--warning[data-v-f6cf04ed]{--px-carousel-border-color:var(--px-color-warning-dark);--px-carousel-shadow-color:var(--px-color-warning-dark);--px-carousel-indicator-active-color:var(--px-color-warning);--px-carousel-arrow-color:var(--px-color-warning)}.px-carousel--info[data-v-f6cf04ed]{--px-carousel-border-color:var(--px-color-info-dark);--px-carousel-shadow-color:var(--px-color-info-dark);--px-carousel-indicator-active-color:var(--px-color-info);--px-carousel-arrow-color:var(--px-color-info)}.px-carousel--danger[data-v-f6cf04ed]{--px-carousel-border-color:var(--px-color-danger-dark);--px-carousel-shadow-color:var(--px-color-danger-dark);--px-carousel-indicator-active-color:var(--px-color-danger);--px-carousel-arrow-color:var(--px-color-danger)}.px-carousel[data-v-d8119c81]{--px-carousel-border-color:var(--px-border-color);--px-carousel-bg-color:var(--px-fill-color-blank);--px-carousel-shadow-color:var(--px-shadow-color);--px-carousel-indicator-color:var(--px-border-color-darker);--px-carousel-indicator-active-color:var(--px-color-primary);--px-carousel-arrow-color:var(--px-text-color-primary);--px-carousel-arrow-bg-color:var(--px-fill-color-blank);--px-carousel-arrow-hover-bg-color:var(--px-fill-color-light);font-family:var(--px-font-family);filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-carousel-shadow-color));background:0 0;border:none;outline:none;position:relative;overflow:visible}.px-carousel[data-v-d8119c81]:before{content:"";background:var(--px-carousel-border-color);clip-path:polygon(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));z-index:0;pointer-events:none;position:absolute;inset:0}.px-carousel[data-v-d8119c81]:after{content:"";background:var(--px-carousel-bg-color);clip-path:polygon(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));z-index:0;pointer-events:none;position:absolute;inset:2px}.px-carousel__viewport[data-v-d8119c81]{z-index:1;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));position:absolute;inset:2px;overflow:hidden}.px-carousel__track[data-v-d8119c81]{height:100%;transition:transform .15s steps(3,end);display:flex}.px-carousel.is-vertical .px-carousel__track[data-v-d8119c81]{flex-direction:column}.px-carousel-item[data-v-d8119c81]{flex-shrink:0;width:100%;height:100%;overflow:hidden}.px-carousel__arrows[data-v-d8119c81]{z-index:2;pointer-events:none;position:absolute;inset:0}.px-carousel__arrows.is-hover .px-carousel__arrow[data-v-d8119c81]{opacity:0;transition:opacity .1s steps(2,end)}.px-carousel:hover .px-carousel__arrows.is-hover .px-carousel__arrow[data-v-d8119c81]{opacity:1}.px-carousel__arrow[data-v-d8119c81]{border:2px solid var(--px-carousel-border-color);background:var(--px-carousel-arrow-bg-color);width:28px;height:28px;color:var(--px-carousel-arrow-color);cursor:pointer;pointer-events:auto;z-index:3;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));justify-content:center;align-items:center;padding:0;font-size:14px;display:flex;position:absolute}.px-carousel__arrow[data-v-d8119c81]:hover{background:var(--px-carousel-arrow-hover-bg-color)}.px-carousel__arrow[data-v-d8119c81]:disabled,.px-carousel__arrow[data-v-d8119c81]:disabled:hover{opacity:.4;cursor:not-allowed;background:var(--px-carousel-arrow-bg-color)}.px-carousel__arrow--prev[data-v-d8119c81]{top:50%;left:8px;transform:translateY(-50%)}.px-carousel__arrow--next[data-v-d8119c81]{top:50%;right:8px;transform:translateY(-50%)}.px-carousel__arrow--prev[data-v-d8119c81]:active:not(:disabled),.px-carousel__arrow--next[data-v-d8119c81]:active:not(:disabled){transform:translateY(-50%)translate(1px,1px)}.px-carousel.is-vertical .px-carousel__arrow--prev[data-v-d8119c81]{top:8px;left:50%;transform:translate(-50%)}.px-carousel.is-vertical .px-carousel__arrow--next[data-v-d8119c81]{top:auto;bottom:8px;left:50%;transform:translate(-50%)}.px-carousel.is-vertical .px-carousel__arrow--prev[data-v-d8119c81]:active:not(:disabled),.px-carousel.is-vertical .px-carousel__arrow--next[data-v-d8119c81]:active:not(:disabled){transform:translate(-50%)translate(1px,1px)}.px-carousel__indicators[data-v-d8119c81]{z-index:2;gap:6px;display:flex;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.px-carousel.is-vertical .px-carousel__indicators[data-v-d8119c81]{flex-direction:column;inset:50% 8px auto auto;transform:translateY(-50%)}.px-carousel__indicator[data-v-d8119c81]{border:2px solid var(--px-carousel-indicator-color);cursor:pointer;background:0 0;width:8px;height:8px;padding:0}.px-carousel__indicator[data-v-d8119c81]:hover{background:var(--px-carousel-indicator-color)}.px-carousel__indicator.is-active[data-v-d8119c81]{background:var(--px-carousel-indicator-active-color);border-color:var(--px-carousel-indicator-active-color)}.px-carousel--primary[data-v-d8119c81]{--px-carousel-border-color:var(--px-color-primary-dark);--px-carousel-shadow-color:var(--px-color-primary-dark);--px-carousel-indicator-active-color:var(--px-color-primary);--px-carousel-arrow-color:var(--px-color-primary)}.px-carousel--success[data-v-d8119c81]{--px-carousel-border-color:var(--px-color-success-dark);--px-carousel-shadow-color:var(--px-color-success-dark);--px-carousel-indicator-active-color:var(--px-color-success);--px-carousel-arrow-color:var(--px-color-success)}.px-carousel--warning[data-v-d8119c81]{--px-carousel-border-color:var(--px-color-warning-dark);--px-carousel-shadow-color:var(--px-color-warning-dark);--px-carousel-indicator-active-color:var(--px-color-warning);--px-carousel-arrow-color:var(--px-color-warning)}.px-carousel--info[data-v-d8119c81]{--px-carousel-border-color:var(--px-color-info-dark);--px-carousel-shadow-color:var(--px-color-info-dark);--px-carousel-indicator-active-color:var(--px-color-info);--px-carousel-arrow-color:var(--px-color-info)}.px-carousel--danger[data-v-d8119c81]{--px-carousel-border-color:var(--px-color-danger-dark);--px-carousel-shadow-color:var(--px-color-danger-dark);--px-carousel-indicator-active-color:var(--px-color-danger);--px-carousel-arrow-color:var(--px-color-danger)}

package/dist/theme/ChatBubble.css

@@ -1,218 +1 @@
-/* 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);
-}
+.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);--px-chat-inset-highlight:inset 2px 2px 0 0 #fff3;--px-chat-inset-shadow:inset -2px -2px 0 0 #0000000f;font-family:var(--px-font-family);font-size:var(--px-font-size-base);box-sizing:border-box;align-items:flex-start;gap:8px;transition:none;display:flex}.px-chat--start[data-v-c022026d]{flex-direction:row}.px-chat--start .px-chat__header[data-v-c022026d],.px-chat--start .px-chat__footer[data-v-c022026d]{text-align:left}.px-chat--start .px-chat__tail[data-v-c022026d]{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);left:-6px}.px-chat--start .px-chat__tail[data-v-c022026d]:after{content:"";background:var(--px-chat-bubble-bg-color);clip-path:polygon(6px 2px,8px 2px,8px 6px,4px 6px,4px 4px,6px 4px);position:absolute;inset:0}.px-chat--end[data-v-c022026d]{flex-direction:row-reverse}.px-chat--end .px-chat__header[data-v-c022026d],.px-chat--end .px-chat__footer[data-v-c022026d]{text-align:right}.px-chat--end .px-chat__tail[data-v-c022026d]{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);left:auto;right:-6px}.px-chat--end .px-chat__tail[data-v-c022026d]:after{content:"";background:var(--px-chat-bubble-bg-color);clip-path:polygon(0 2px,2px 2px,2px 4px,4px 4px,4px 6px,0 6px);position:absolute;inset:0}.px-chat__avatar[data-v-c022026d]{flex-shrink:0}.px-chat__content[data-v-c022026d]{flex-direction:column;gap:4px;max-width:80%;display:flex;position:relative}.px-chat__header[data-v-c022026d]{font-size:var(--px-font-size-small);color:var(--px-chat-header-color);align-items:center;gap:8px;line-height:1.2;display:flex}.px-chat__name[data-v-c022026d]{font-weight:600}.px-chat__time[data-v-c022026d]{font-size:var(--px-font-size-extra-small);opacity:.7}.px-chat__tail[data-v-c022026d]{z-index:1;width:8px;height:8px;position:absolute;top:8px}.px-chat__bubble[data-v-c022026d]{color:var(--px-chat-bubble-text-color);word-break:break-word;filter:drop-shadow(2px 2px 0px var(--px-chat-bubble-shadow-color));background:0 0;border:none;padding:8px 12px;line-height:1.5;position:relative}.px-chat__bubble[data-v-c022026d]:before{content:"";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;position:absolute;inset:0}.px-chat__bubble[data-v-c022026d]:after{content:"";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;position:absolute;inset:2px}.px-chat__footer[data-v-c022026d]{font-size:var(--px-font-size-extra-small);color:var(--px-chat-footer-color);line-height:1.2}.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)}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 #ffffff14;--px-chat-inset-shadow:inset -2px -2px 0 0 #00000026}