/* Prévia do celular: sempre uma tela clara de Instagram, independente do tema do app. */
.post-thumb,
    .post-grid-item img,
    .automation-row-media img,
    .account-card img,
    .post-preview-card img {
      background-image: linear-gradient(90deg, #efefef 25%, #e8e8e8 37%, #efefef 63%);
      background-size: 400% 100%;
      animation: img-skeleton-pulse 1.4s ease infinite;
    }

/* Phone preview - always mimics a real (light) Instagram screen, regardless of app theme */
    .phone-shell {
      position: relative;
      background: linear-gradient(160deg, #2b2b2d, #060606 60%);
      border-radius: 38px;
      padding: 7px;
      width: 300px;
      box-shadow:
        0 20px 40px -14px rgba(0,0,0,0.3),
        0 8px 18px -8px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.07);
    }

.phone-shell::before, .phone-shell::after {
      content: ""; position: absolute; background: #1c1c1e; border-radius: 3px;
    }

.phone-shell::before { width: 2px; height: 46px; left: -2px; top: 108px; box-shadow: 0 64px 0 #1c1c1e; }

.phone-shell::after { width: 2px; height: 70px; right: -2px; top: 140px; }

.phone-screen {
      position: relative;
      background: #f2f2f2;
      border-radius: 32px;
      overflow: hidden;
      min-height: 460px;
      display: flex;
      flex-direction: column;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    }

.phone-notch {
      position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
      width: 64px; height: 18px; background: #060606; border-radius: 12px; z-index: 5;
    }

.phone-status {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 22px 4px; font-size: 12px; font-weight: 700; color: #111111;
    }

.phone-status .icons { display: flex; gap: 5px; align-items: center; }

.battery-icon {
      width: 20px; height: 10px; border: 1.3px solid #111111; border-radius: 3px;
      padding: 1.5px; position: relative;
    }

.battery-icon::after {
      content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px;
      background: #111111; border-radius: 0 1px 1px 0;
    }

.battery-fill { width: 78%; height: 100%; background: #111111; border-radius: 1px; }

.battery-pct { font-size: 10px; font-weight: 700; }

.typing-bubble {
      align-self: flex-start;
      background: white; border-radius: 18px 18px 18px 5px;
      padding: 12px 16px; display: flex; gap: 4px; align-items: center;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 10px rgba(0,0,0,0.04);
    }

.typing-bubble span {
      width: 6px; height: 6px; border-radius: 50%; background: #b8b8b8;
      animation: typing-bounce 1.1s infinite ease-in-out;
    }

.typing-bubble span:nth-child(2) { animation-delay: 0.15s; }

.typing-bubble span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

.phone-header {
      background: white;
      padding: 8px 14px 12px;
      display: flex; align-items: center; gap: 9px;
      border-bottom: 1px solid #ebebeb;
    }

.phone-header .back-arrow { color: #111111; flex-shrink: 0; }

.phone-header .back-arrow svg { width: 18px; height: 18px; }

.phone-header .avatar {
      width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
      background: #f0f0f0;
      box-shadow: 0 0 0 2px white, 0 0 0 3px #ececec;
    }

.phone-header .name { font-size: 13.5px; font-weight: 700; color: #111111; }

.phone-header .sub { font-size: 11px; color: #737373; }

.phone-body {
      flex: 1; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
      background-image: radial-gradient(circle, rgba(0,0,0,0.025) 1px, transparent 1px);
      background-size: 14px 14px;
    }

.dm-bubble {
      background: white;
      border-radius: 18px 18px 18px 5px;
      padding: 11px 15px;
      font-size: 13.5px;
      line-height: 1.5;
      color: #111111;
      max-width: 85%;
      align-self: flex-start;
      word-wrap: break-word;
      white-space: pre-wrap;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 10px rgba(0,0,0,0.04);
    }

.dm-bubble.empty { color: #a8a8a8; font-style: italic; box-shadow: none; }

.dm-meta { font-size: 10.5px; color: #9a9a9a; align-self: flex-start; margin-top: 2px; margin-left: 4px; display: flex; align-items: center; gap: 4px; }

.dm-meta svg { width: 11px; height: 11px; }

.comment-preview {
      background: white; border-radius: 14px; padding: 11px 13px;
      font-size: 12.5px; color: #737373; margin: 14px 14px 0;
      display: flex; align-items: flex-start; gap: 9px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 3px 8px rgba(0,0,0,0.03);
    }

.comment-preview .comment-icon {
      width: 26px; height: 26px; border-radius: 50%; background: #f0f0f0; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }

.comment-preview .comment-icon svg { width: 13px; height: 13px; color: #111111; }

.comment-preview b { color: #111111; }

.variant-badge {
      font-size: 10.5px; font-weight: 700; color: #737373; background: white;
      padding: 3px 10px; border-radius: 20px; align-self: flex-start; margin-bottom: 4px; margin-left: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

.post-preview-card {
      margin: 14px 14px 0; background: white; border-radius: 14px; overflow: hidden;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 3px 8px rgba(0,0,0,0.03);
    }

.post-preview-card img { width: 100%; aspect-ratio: 1.1; object-fit: cover; display: block; }

.post-preview-card .post-preview-caption {
      padding: 8px 11px; font-size: 11.5px; color: #111111; line-height: 1.4;
    }

.post-preview-card .post-preview-caption b { display: block; font-size: 11px; color: #737373; margin-bottom: 2px; font-weight: 700; }

.post-preview-story {
      margin: 14px 14px 0; display: flex; align-items: center; gap: 10px;
      background: white; border-radius: 14px; padding: 10px 13px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 3px 8px rgba(0,0,0,0.03);
    }

.post-preview-story .story-ring {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      background: conic-gradient(from 45deg, #111111, #8a8a8a, #111111);
      display: flex; align-items: center; justify-content: center; padding: 2px;
    }

.post-preview-story .story-ring img, .post-preview-story .story-ring .avatar-fallback {
      width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid white;
    }

.post-preview-story .story-text { font-size: 12px; color: #111111; font-weight: 600; }

.post-preview-story .story-sub { font-size: 11px; color: #737373; }

/* Phone compose bar */
    .phone-compose {
      display: flex; align-items: center; gap: 8px; padding: 10px 12px;
      background: white; border-top: 1px solid #e6e6e6;
    }

.phone-compose .compose-field {
      flex: 1; background: #f4f4f4; border-radius: 20px; padding: 7px 14px;
      font-size: 12px; color: #b0b0b0;
    }

.phone-compose svg { width: 18px; height: 18px; color: #737373; flex-shrink: 0; }

.phone-empty-ghost {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 8px; color: #c2c2c2; font-size: 12px; text-align: center; padding: 0 30px;
    }

.phone-empty-ghost svg { width: 30px; height: 30px; }