/* ============================================
   Tweet card — pixel-perfect HTML reproduction
   Designed to match Twitter/X embed widget at 380px width within a
   1920px reference viewport. All sizes in vw so the card scales with
   the rest of the site (PDF-like proportional scaling).
   At 1920 viewport, vw values resolve to the original target px values.
   ============================================ */

.tw {
  /* Twitter "Dim" theme (bluish dark) — matches the Framer mockups, not the
     "Lights out" pure-black theme. Twitter has 3 themes: Default (light),
     Dim (this), and Lights out (#000). */
  --tw-bg: rgb(21, 32, 43);
  --tw-border: rgb(56, 68, 77);
  --tw-text: rgb(247, 249, 249);
  --tw-text-secondary: rgb(136, 153, 166);
  --tw-blue: rgb(29, 155, 240);
  --tw-verified-blue: rgb(29, 155, 240);
  --tw-verified-gold: rgb(255, 199, 0);

  background: var(--tw-bg);
  color: var(--tw-text);
  border: 1px solid var(--tw-border);
  border-radius: 0.625vw;
  padding: 0.625vw 0.833vw;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.781vw;
  line-height: 1.042vw;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* --- Header --- */
.tw-header {
  display: flex;
  align-items: flex-start;
  gap: 0.417vw;
  position: relative;
}

.tw-avatar {
  width: 2.083vw;
  height: 2.083vw;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.tw-author {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.tw-name-row {
  display: flex;
  align-items: center;
  gap: 0.208vw;
  min-width: 0;
}

.tw-name {
  font-weight: 700;
  color: var(--tw-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-verified {
  width: 0.833vw;
  height: 0.833vw;
  flex-shrink: 0;
}
.tw-verified.tw-verified-blue { color: var(--tw-verified-blue); }
.tw-verified.tw-verified-gold { color: var(--tw-verified-gold); }

.tw-handle-row {
  display: flex;
  align-items: center;
  gap: 0.208vw;
  min-width: 0;
}

.tw-handle {
  color: var(--tw-text-secondary);
  font-size: 0.781vw;
  line-height: 1.042vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-dot {
  color: var(--tw-text-secondary);
  font-size: 0.781vw;
  line-height: 1.042vw;
  flex-shrink: 0;
}

.tw-follow {
  color: var(--tw-blue);
  font-size: 0.781vw;
  line-height: 1.042vw;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
}

.tw-follow:hover { text-decoration: underline; }

.tw-x-logo {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.146vw;
  height: 1.146vw;
  color: var(--tw-text);
}

/* --- Body --- */
.tw-text {
  margin: 0.625vw 0 0;
  font-size: 0.781vw;
  line-height: 1.042vw;
  color: var(--tw-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.tw-text a {
  color: var(--tw-blue);
  text-decoration: none;
}

.tw-text a:hover {
  text-decoration: underline;
}

.tw-text img.emoji {
  height: 1.2em;
  width: 1.2em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.2em;
  display: inline;
}

/* --- Media --- */
.tw-media {
  margin-top: 0.625vw;
  border-radius: 0.833vw;
  overflow: hidden;
  border: 1px solid var(--tw-border);
}

.tw-media img {
  width: 100%;
  height: auto;
  display: block;
}

.tw-media-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.104vw;
}

/* Multi-image grids: crop each image to a uniform 16:9 cell so a panoramic
   image among standard ones doesn't leave a half-height gap. Matches
   Twitter's own multi-image card layout. */
.tw-media-grid-2 img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: auto;
}

/* --- Meta (timestamp · likes · replies) --- */
.tw-meta {
  margin-top: 0.625vw;
  font-size: 0.781vw;
  line-height: 1.042vw;
  color: var(--tw-text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.417vw;
}

.tw-meta-time {
  color: var(--tw-text-secondary);
  text-decoration: none;
}

.tw-meta-time:hover { text-decoration: underline; }

.tw-info-icon {
  width: 0.938vw;
  height: 0.938vw;
  color: var(--tw-text-secondary);
  flex-shrink: 0;
}

/* --- Action bar --- */
.tw-actions {
  display: flex;
  align-items: center;
  gap: 1.25vw;
  margin-top: 0.625vw;
  padding-top: 0.625vw;
  border-top: 1px solid var(--tw-border);
}

.tw-action {
  display: inline-flex;
  align-items: center;
  gap: 0.417vw;
  color: var(--tw-text-secondary);
  font-size: 0.729vw;
  line-height: 0.938vw;
  text-decoration: none;
}

.tw-action svg {
  width: 1.042vw;
  height: 1.042vw;
  fill: currentColor;
}

.tw-action-like-icon { color: rgb(249, 24, 128); }
.tw-action-reply { color: var(--tw-blue); }
.tw-action-reply svg { color: var(--tw-blue); }

/* --- Footer "Read replies" button --- */
.tw-replies-btn {
  display: block;
  margin-top: 0.625vw;
  padding: 0.417vw 0.833vw;
  background: transparent;
  color: var(--tw-blue);
  border: 1px solid var(--tw-border);
  border-radius: 9999px;
  font-size: 0.729vw;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.tw-replies-btn:hover {
  background: rgba(29, 155, 240, 0.1);
}