/* Shared final layout rules: text alignment and bubble placement are separate. */
.chat-wrap .chat-list,
body.v2-page .chat-wrap .chat-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: var(--bubble-align, center) !important;
  width: 100% !important;
  box-sizing: border-box;
  padding-inline: var(--bubble-gutter, 16px);
}
.chat-wrap .message,
body.v2-page .chat-wrap .message,
body.v2-page .chat-wrap.nameplate-frame .message {
  width: var(--bubble-width, fit-content) !important;
  max-width: min(100%, var(--width)) !important;
  min-width: min(var(--bubble-min-width, 64px), 100%, var(--width)) !important;
  align-self: var(--bubble-align, center) !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
  margin-inline: 0 !important;
}
.chat-wrap.artwork-frame .message { min-height: var(--bubble-min-height) !important; }
.chat-wrap.integrated-background-frame:not(.fixed-side-wing-frame) .message,
body.v2-page .chat-wrap.integrated-background-frame:not(.fixed-side-wing-frame) .message {
  width: max(var(--bubble-min-width), min(100%, var(--width))) !important;
  max-width: max(var(--bubble-min-width), min(100%, var(--width))) !important;
  min-width: var(--bubble-min-width) !important;
}
.chat-wrap.artwork-frame .message-chat-content,
.chat-wrap.artwork-frame .message-content {
  z-index: max(var(--layer-z-text, 6), calc(var(--layer-z-bg, 1) + 1)) !important;
}
.chat-wrap.integrated-background-frame .message-chat-content,
.chat-wrap.integrated-background-frame .message-content,
.chat-wrap.integrated-background-frame .nickname-tag,
.chat-wrap.integrated-background-frame .message-name-label {
  /* The center is painted inside the same nine-slice image as the border.
     It cannot be allowed to cover chat text when a saved layer order puts
     the border above text. Independent decorations still retain their order. */
  z-index: max(var(--layer-z-text, 6), calc(var(--layer-z-border, 4) + 2)) !important;
}
.chat-wrap .message-chat-content { min-width: 0; max-width: 100%; }
.chat-wrap .message-content {
  text-align: var(--align) !important;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: var(--line, 1.45) !important;
}
.chat-wrap .message-content > strong,
.chat-wrap .message-content .badge {
  height: auto !important;
  line-height: inherit !important;
}
.chat-wrap .message-content > strong {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
/* Existing frame slices preserve the artwork corners when content grows. */
.chat-wrap.concept-frame:not(.stretch-safe-frame) .message {
  aspect-ratio: auto;
  min-height: var(--art-frame-min-height, 96px);
  padding: max(var(--padding), var(--art-safe-top)) max(var(--padding), var(--art-safe-right)) max(var(--padding), var(--art-safe-bottom)) max(var(--padding), var(--art-safe-left));
}
.chat-wrap.concept-frame:not(.stretch-safe-frame) .message::before {
  inset: -14px -18px;
  background: none;
  border: 1px solid transparent;
  border-image-source: var(--art-frame-url);
  border-image-slice: var(--art-frame-slice);
  border-image-width: var(--art-frame-top) var(--art-frame-right) var(--art-frame-bottom) var(--art-frame-left);
  border-image-repeat: stretch;
}
.chat-wrap.concept-frame:not(.integrated-background-frame) .message-fill {
  /* A measured underlap hides raster seams without overwriting manual cuts. */
  inset: var(--frame-paint-fill-top, var(--frame-fill-top)) var(--frame-paint-fill-right, var(--frame-fill-right)) var(--frame-paint-fill-bottom, var(--frame-fill-bottom)) var(--frame-paint-fill-left, var(--frame-fill-left));
}
.chat-wrap.fixed-side-wing-frame .message::before { display: none !important; }
.chat-wrap.fixed-side-wing-frame .message-fill,
.chat-wrap.fixed-side-wing-frame .message-border-layer {
  display: block !important;
  position: absolute;
  inset: var(--frame-fill-top) var(--frame-fill-right) var(--frame-fill-bottom) var(--frame-fill-left);
  border-radius: var(--frame-fill-radius);
  z-index: calc(var(--layer-z-border, 4) + 2) !important;
}
.chat-wrap.fixed-side-wing-frame .message-border-layer { border: 2px solid var(--outline); pointer-events: none; }
.chat-wrap .frame-side-wing {
  position: absolute;
  top: calc(50% + (var(--frame-fill-top) - var(--frame-fill-bottom)) / 2);
  width: 38.4px;
  height: 46.4px;
  transform: translateY(-50%);
  background-image: var(--art-frame-url);
  background-size: 347.52px 115.84px;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: calc(var(--layer-z-border, 4) + 1);
  filter: hue-rotate(var(--frame-hue,0deg)) saturate(var(--frame-saturation,100%)) brightness(var(--frame-brightness,100%));
}
.chat-wrap .frame-side-wing.wing-left { left: calc(var(--frame-fill-left) - 30.4px); background-position: left -30.4px; clip-path:inset(0 8px 0 0); }
.chat-wrap .frame-side-wing.wing-right { right: calc(var(--frame-fill-right) - 30.4px); background-position: right -30.4px; clip-path:inset(0 0 0 8px); }
.chat-wrap.fixed-side-wing-frame .message-chat-content,
.chat-wrap.fixed-side-wing-frame .message-content { z-index: calc(max(var(--layer-z-text,6), var(--layer-z-border,4)) + 3) !important; }
.chat-wrap .frame-side-button {
  position:absolute;top:calc(50% + (var(--frame-fill-top) - var(--frame-fill-bottom))/2);
  width:18px;height:18px;transform:translateY(-50%);pointer-events:none;z-index:calc(var(--layer-z-border,4) + 3);
}
.chat-wrap .frame-side-button svg { width:100%;height:100%;display:block; }
.chat-wrap .frame-side-button.button-left { left:calc(var(--frame-fill-left) + 3px); }
.chat-wrap .frame-side-button.button-right { right:calc(var(--frame-fill-right) + 3px); }
.chat-wrap:is(.basic-filled-10-stitched-buttons,.basic-open-12-stitched-buttons) .message-border-layer {
  outline:1px dashed var(--accent2);outline-offset:-4px;
}