/* Dialogue skin: Cozy UI Pack (dobo_ui). Include after dialogue.css. Needs /ui/cozy/frame.png and /ui/cozy/tag.png. */
.dlg { --dlg-ink: #232a4a; --dlg-edge: #8a4636; --dlg-paper: transparent; }
.dlg-box { border: 22px solid transparent; border-image: url('/ui/cozy/frame.png') 58 fill / 22px stretch; border-radius: 0; box-shadow: none;
  padding: 2px 10px 6px; min-height: 124px; }
.dlg-box.dlg-out { animation: dlg-down .3s ease-in forwards; }
/* tail toward the speaker */
.dlg-box::before { content: ''; position: absolute; top: 38%; width: 22px; height: 22px; background: #fffdf0; border: 3px solid var(--dlg-edge); border-top: 0; border-right: 0; transform: rotate(45deg); }
.dlg-box[data-side="left"]::before { left: -32px; }
.dlg-box[data-side="right"]::before { right: -32px; transform: rotate(225deg); }
/* name plate: the pack's ribbon tag, masked and filled with the character colour */
.dlg-plate { top: -34px; left: 4px; border: 0; border-radius: 0; padding: 8px 26px 12px; min-width: 110px; text-align: center;
  -webkit-mask: url('/ui/cozy/tag.png') center / 100% 100% no-repeat; mask: url('/ui/cozy/tag.png') center / 100% 100% no-repeat;
  color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); font-size: 15px; }
.dlg-box[data-side="right"] .dlg-plate { left: auto; right: 4px; }
.dlg-more { right: 4px; bottom: -6px; color: var(--dlg-edge); }
.dlg-opt.dlg-focus, .dlg-opt:focus-visible { background: rgba(138,70,54,.10); }
.dlg-opt .dlg-cursor { color: #58a83f; }