.pp-smile-launch,
.pp-smile-dialog,
.pp-smile-dialog * { box-sizing: border-box; }

.pp-smile-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border: 0;
  border-radius: 12px;
  background: #ffbd32;
  color: #21102b;
  font: 700 16px/1.2 Arial, Helvetica, sans-serif;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pp-smile-launch:hover { background: #ffcd62; }
.pp-smile-launch:focus-visible,
.pp-smile-dialog__close:focus-visible { outline: 3px solid #7ce5ff; outline-offset: 3px; }

.pp-smile-dialog {
  width: min(calc(100vw - 32px), 422px);
  height: min(calc(100vh - 32px), 792px);
  height: min(calc(100dvh - 32px), 792px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #9b7738;
  border-radius: 16px;
  background: #170a27;
  color: #fff7dc;
  box-shadow: 0 24px 100px rgb(0 0 0 / 55%);
}

.pp-smile-dialog::backdrop { background: rgb(9 7 22 / 80%); }
.pp-smile-dialog__sheet { display: grid; grid-template-rows: 48px minmax(0, 1fr); width: 100%; height: 100%; }
.pp-smile-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 0 16px; border-bottom: 1px solid rgb(155 119 56 / 30%); }
.pp-smile-dialog__title { overflow: hidden; font: 700 13px/1.2 Arial, Helvetica, sans-serif; letter-spacing: .5px; white-space: nowrap; text-overflow: ellipsis; color: #d9c9ed; }
.pp-smile-dialog__close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #fff7dc; font: 400 32px/1 Arial, Helvetica, sans-serif; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pp-smile-dialog__close:hover { background: rgb(255 255 255 / 8%); }
.pp-smile-dialog__frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: #090716; }

@media (max-width: 600px), (max-height: 600px) {
  .pp-smile-dialog { width: 100vw; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .pp-smile-dialog__sheet { grid-template-rows: calc(48px + env(safe-area-inset-top, 0px)) minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .pp-smile-dialog__header { padding-top: env(safe-area-inset-top, 0px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(4px, env(safe-area-inset-right, 0px)); }
}