/*
 * WSEE STAMPING DESK
 * Tweet perspective + mobile layout
 *
 * Load AFTER css/styles.css
 */

/* ========================================
   TWEET AREA — PERSPECTIVE
   ======================================== */

.stamping-step-6 .case-post {
  position: absolute;

  top: 27.5%;
  left: 49%;

  width: 43%;
  height: 28.5%;

  box-sizing: border-box;

  /*
   * The parchment tilts upward toward
   * the right and has a slight perspective.
   *
   * This transform affects the tweet,
   * its stamp, and its engagement footer
   * together.
   */
  transform-origin: center center;

  transform:
    perspective(900px)
    rotateY(-3deg)
    rotateZ(-4deg)
    skewY(-1deg);

  color: #241a12;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.4;

  overflow: hidden;
  isolation: isolate;
}

/* ========================================
   CONTENT
   ======================================== */

.stamping-step-6 .case-post-content {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  padding: 5px 7px 5px 5px;

  overflow: hidden;

  z-index: 1;
}

/* ========================================
   AUTHOR HEADER
   ======================================== */

.stamping-step-6 .case-post .case-post-author {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  flex: 0 0 auto;

  gap: 6px;

  min-height: 32px;

  margin: 0 0 8px;
  padding: 0;
}

.stamping-step-6 .wsee-x-profile {
  display: flex;
  align-items: center;

  gap: 7px;

  min-width: 0;
  max-width: calc(100% - 24px);

  flex: 1 1 auto;
}

.stamping-step-6 .wsee-x-avatar {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  box-sizing: border-box;

  border-radius: 50%;
  border: 1px solid #b78a45;

  background: #35251b;
  color: #f5d58b;

  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.stamping-step-6 .wsee-x-identity {
  display: flex;
  flex-direction: column;

  gap: 3px;

  min-width: 0;
  flex: 1 1 auto;
}

.stamping-step-6 .wsee-x-identity strong {
  display: block;

  width: 100%;
  max-width: 100%;

  color: #211810;

  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stamping-step-6 .wsee-x-identity > span {
  display: block;

  width: 100%;
  max-width: 100%;

  color: #715b46;

  font-family: Arial, sans-serif;
  font-size: 9px;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stamping-step-6 .case-post-author > span {
  display: inline-block;

  flex: 0 0 auto;

  color: #241a12;

  font-family: Arial, sans-serif;
  font-size: 17px;
  line-height: 1;
}

/* ========================================
   TWEET TEXT
   ======================================== */

.stamping-step-6 .case-post .case-post-text {
  display: block;

  flex: 1 1 auto;

  width: 100%;
  min-height: 0;

  box-sizing: border-box;

  margin: 0;
  padding: 0 3px 0 0;

  color: #241a12;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.38;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width: thin;
  scrollbar-color: rgba(125, 88, 51, 0.5) transparent;

  overscroll-behavior: contain;
}

.stamping-step-6
.case-post
.case-post-text::-webkit-scrollbar {
  width: 3px;
}

.stamping-step-6
.case-post
.case-post-text::-webkit-scrollbar-thumb {
  background: rgba(125, 88, 51, 0.5);
  border-radius: 3px;
}

/* ========================================
   STAMP — LOWER RIGHT
   ======================================== */

.stamping-step-6 .case-post .case-post-stamp {
  position: absolute;

  top: auto;
  left: auto;

  right: -1%;
  bottom: 12%;

  width: 55%;
  height: auto;

  max-height: 60%;

  object-fit: contain;

  transform: rotate(-12deg);
  transform-origin: center center;

  pointer-events: none;

  z-index: 5;
}

/* ========================================
   ENGAGEMENT FOOTER
   ======================================== */

.stamping-step-6 .wsee-x-engagement {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex: 0 0 auto;

  width: 100%;
  min-height: 27px;

  box-sizing: border-box;

  gap: 3px;

  margin-top: auto;
  padding: 6px 3px 2px;

  border-top: 1px solid rgba(80, 55, 35, 0.3);

  color: #715b46;

  font-family: Arial, sans-serif;
  font-size: 10px;

  position: relative;
  z-index: 6;
}

.stamping-step-6 .wsee-x-metric {
  display: inline-flex;
  align-items: center;

  flex: 0 1 auto;

  gap: 4px;

  min-width: 0;

  color: #715b46;

  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
}

.stamping-step-6 .wsee-x-metric-icon {
  display: inline-block;

  color: #715b46;

  font-family:
    Arial,
    "Segoe UI Symbol",
    sans-serif;

  font-size: 16px;
  line-height: 1;
}

.stamping-step-6
.wsee-x-metric > span:last-child {
  display: none;
}

/* ========================================
   NO ORIGINAL POST LINK
   ======================================== */

.stamping-step-6 .case-post-original {
  display: none !important;
}

/* ========================================
   LOADING AND ERROR STATES
   ======================================== */

.stamping-step-6
.case-post-content > [role="status"] {
  flex: 1 1 auto;
  min-height: 0;

  margin: 5px 0;

  color: #5d4732;

  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
}

.stamping-step-6 .case-post-unavailable {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  padding-right: 5px;

  color: #5d4732;

  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1.4;
}

.stamping-step-6 .case-post-unavailable p {
  margin: 0 0 8px;

  font-size: inherit;
  line-height: inherit;
}

.stamping-step-6 .case-post-unavailable button {
  min-height: 24px;
  font-size: 9px;
}

/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 600px) {

  .stamping-step-6 .case-post {
    /*
     * Keep the tweet aligned with the
     * parchment on mobile as well.
     */
    transform:
      perspective(900px)
      rotateY(-3deg)
      rotateZ(-4deg)
      skewY(-1deg);

    font-size: 10px;
  }

  .stamping-step-6 .case-post-content {
    padding: 4px 5px;
  }

  .stamping-step-6 .case-post .case-post-author {
    min-height: 26px;
    margin-bottom: 5px;
  }

  .stamping-step-6 .wsee-x-profile {
    gap: 5px;
    max-width: calc(100% - 17px);
  }

  .stamping-step-6 .wsee-x-avatar {
    width: 24px;
    height: 24px;

    flex-basis: 24px;

    font-size: 12px;
  }

  .stamping-step-6 .wsee-x-identity strong {
    font-size: 10px;
  }

  .stamping-step-6 .wsee-x-identity > span {
    font-size: 8px;
  }

  .stamping-step-6 .case-post-author > span {
    font-size: 13px;
  }

  .stamping-step-6 .case-post .case-post-text {
    font-size: 9.5px;
    line-height: 1.32;
  }

  .stamping-step-6 .case-post .case-post-stamp {
    top: auto;
    left: auto;

    right: -1%;
    bottom: 12%;

    width: 53%;
    max-height: 59%;
  }

  .stamping-step-6 .wsee-x-engagement {
    min-height: 22px;
    padding: 3px 2px 1px;
  }

  .stamping-step-6 .wsee-x-metric {
    gap: 2px;
  }

  .stamping-step-6 .wsee-x-metric-icon {
    font-size: 12px;
  }
}

/* ========================================
   END
   ======================================== */

/* Automatically assigned charge on step 4 */
.stamping-step-4 .ministry-assigned-charge {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid rgba(202, 155, 65, .6);
  border-radius: 6px;
  background: rgba(35, 23, 10, .35);
  color: #f3d891;
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
}

/* =========================================
   WSEE — FULL AUTHOR NAME FIX
   ========================================= */

.stamping-step-6 .case-post .case-post-author {
  width: 100%;
  gap: 4px;
}

.stamping-step-6 .case-post-author > div {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 18px);
}

.stamping-step-6 .wsee-x-profile {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.stamping-step-6 .wsee-x-identity {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.stamping-step-6 .wsee-x-identity strong,
.stamping-step-6 .wsee-x-identity > span {
  width: 100%;
  max-width: 100%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .stamping-step-6 .case-post-author > div {
    max-width: calc(100% - 15px);
  }

  .stamping-step-6 .wsee-x-identity strong {
    font-size: 10px;
  }

  .stamping-step-6 .wsee-x-identity > span {
    font-size: 8px;
  }
}

/* WSEE — X author and handle width fix */

.stamping-step-6 .case-post .case-post-author {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
}

.stamping-step-6 .case-post .case-post-author > div:first-child {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  max-width: none;
}

.stamping-step-6 .wsee-x-profile {
  display: flex;
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: 1 1 auto;
}

.stamping-step-6 .wsee-x-identity {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
}

.stamping-step-6 .wsee-x-identity strong,
.stamping-step-6 .wsee-x-identity > span {
  display: block;
  width: 100%;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stamping-step-6 .case-post-author > span {
  flex: 0 0 auto;
}