.preview-wrap { width: var(--insta-width); transition: .18s ease; }

#previewWrap {
        position: sticky;
        top: 80px;                /* 60px menu + 20px spacing */
        align-self: flex-start;
    }

/* theme variables (used inside preview) */
.preview-wrap.light { --ig-card-bg:#fff; --ig-text:#111; --ig-muted:#6b7280; --ig-link:#0657ff; --ig-icon:#111; --ig-like-red:#ed4956; }
.preview-wrap.dim   { --ig-card-bg:#181818; --ig-text:#e0e0e0; --ig-muted:#a0a0a0; --ig-link:#3399ff; --ig-icon:#e6e6e6; --ig-like-red:#ed4956; }
.preview-wrap.dark  { --ig-card-bg:#0f1114; --ig-text:#e9eef1; --ig-muted:#9aa4ad; --ig-link:#63a9ff; --ig-icon:#e9eef1; --ig-like-red:#ed4956; }

/* Card */
.ig-card {
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background:var(--ig-card-bg);
  color:var(--ig-text);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 8px 30px rgba(15,23,42,0.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Header */
.ig-header { display:flex; align-items:center; padding:12px; gap:10px; }
.ig-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; flex:0 0 44px; display:block; }
.ig-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.ig-avatar.ring { padding:2px; border-radius:50%; border:2px solid #ff004f; box-sizing:content-box; }

.ig-username { font-weight:700; font-size:14px; display:flex; align-items:center; gap:6px; color:var(--ig-text); }
.ig-location { font-size:12px; color:var(--ig-muted); margin-top:2px; }

/* three dots */
.ig-dots { margin-left:auto; opacity:0.95; cursor:pointer; color:var(--ig-icon); }

/* Portrait 'post' size */
.ig-image { width:100%; height:480px; background:#ddd; object-fit:cover; display:block; } /* height tuned for portrait feel */

/* actions row */
.ig-actions { display:flex; gap:10px; align-items:center; padding:10px 12px; color:var(--ig-icon); }
.ig-actions .left { display:flex; gap:10px; align-items:center; }
.ig-btn { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; }
.ig-btn svg { width:18px; height:18px; display:block; }

/* likes & caption */
.ig-likes { padding:0 12px; font-weight:700; font-size:14px; color:var(--ig-text); }
.ig-caption { padding:8px 12px; font-size:14px; line-height:1.4; color:var(--ig-text); }
.ig-caption b { margin-right:6px; }
.ig-link { color:var(--ig-link); text-decoration:none; font-weight:600; }

/* comments */
.ig-comment { padding:8px 12px; display:flex; gap:8px; align-items:flex-start; border-top:1px solid rgba(0,0,0,0.03); color:var(--ig-text); }
.ig-comment .c-avatar { width:34px; height:34px; border-radius:50%; overflow:hidden; flex:0 0 34px; }
.ig-comment .c-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.ig-comment .c-body { font-size:14px; flex:1; color:var(--ig-text); }
.comment-like { cursor:pointer; display:flex; gap:6px; align-items:center; color:var(--ig-icon); }

/* small helpers */
.small-icon { width:16px; height:16px; display:inline-block; vertical-align:middle; }
.centered { display:flex; align-items:center; gap:8px; }

/* ensure links inside caption/comments are blue */
.ig-caption a, .ig-comment a { color:var(--ig-link); text-decoration:none; }

/* Like active styling when using SVG fill */
.liked svg { fill: var(--ig-like-red) !important; stroke: var(--ig-like-red) !important; color: var(--ig-like-red) !important; }

/* Save active */
.saved svg { fill: currentColor !important; color: currentColor !important; }

/* Small responsive tweak */
@media(max-width:420px){ .preview-wrap{ transform:scale(0.95); transform-origin:top left } }