/* Custom Styles for @seyraworks IG Dummy Feed Planner */
* {
      box-sizing: border-box;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    body {
      background-color: #090a0f;
      color: #f5f5f7;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }
    /* Custom Scrollbar inside Phone Mockup */
    .ig-scroll::-webkit-scrollbar {
      width: 4px;
    }
    .ig-scroll::-webkit-scrollbar-track {
      background: #000000;
    }
    .ig-scroll::-webkit-scrollbar-thumb {
      background: #262626;
      border-radius: 9999px;
    }
    /* Grid Aspect Ratios */
    .ratio-3-4 {
      aspect-ratio: 3 / 4;
    }
    .ratio-4-5 {
      aspect-ratio: 4 / 5;
    }
    .ratio-1-1 {
      aspect-ratio: 1 / 1;
    }
    .grid-cell {
      position: relative;
      overflow: hidden;
      background-color: #121212;
      cursor: pointer;
      user-select: none;
      transition: transform 0.15s ease, outline 0.15s ease, filter 0.15s ease;
    }
    .grid-cell:active {
      transform: scale(0.98);
    }
    .grid-cell.selected-cell {
      outline: 2.5px solid #3b82f6;
      outline-offset: -2.5px;
      z-index: 10;
    }
    .grid-cell.drag-over {
      outline: 2.5px dashed #10b981;
      outline-offset: -2.5px;
      opacity: 0.75;
    }
    .grid-cell:hover .cell-hover-bar {
      opacity: 1;
    }
    .cell-hover-bar {
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    /* Cropped Pinterest Embed inside 3:4 Grid Cell (hides Pinterest white header/footer chrome) */
    .pin-grid-iframe-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      background: #121212;
    }
    .pin-grid-iframe-wrap iframe {
      position: absolute;
      top: -58px;
      left: -18px;
      width: calc(100% + 36px);
      height: calc(100% + 185px);
      border: 0;
      pointer-events: none;
    }
    /* Clean Pinterest Embed inside Post Feed Card */
    .pin-card-embed-wrap {
      position: relative;
      width: 100%;
      height: 500px;
      overflow: hidden;
      background: #000;
    }
    .pin-card-embed-wrap iframe {
      position: absolute;
      top: -50px;
      left: 0;
      width: 100%;
      height: 610px;
      border: 0;
    }
    .phone-preview {
      height: clamp(540px, 86svh, 780px);
      box-shadow: 0 18px 52px rgb(0 0 0 / 45%);
      container-type: inline-size;
    }
    .phone-preview .ig-scroll { min-height: 0; }
    .phone-dock {
      flex: none;
      min-height: 56px;
      padding: 4px 10px;
      background: #101012;
      border-top: 1px solid #262629;
    }
    .phone-dock button { min-height: 44px; }
    .phone-feed-toolbar {
      position: sticky;
      z-index: 10;
      top: 0;
      display: grid;
      gap: 8px;
      padding: 4px 12px 10px;
      background: #101012;
      border-bottom: 1px solid #262629;
    }
    .phone-feed-heading, .phone-feed-controls, .phone-post-heading,
    .phone-post-actions, .phone-post-identity {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .phone-feed-heading-text, .phone-post-identity > div { min-width: 0; }
    #feedViewTitle { font-size: 15px; font-weight: 700; line-height: 1.3; }
    #feedViewTopUsername {
      color: #a1a1aa;
      font-size: 11px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .phone-feed-back {
      flex: 0 0 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 10px;
    }
    .phone-control {
      min-height: 36px;
      padding: 6px 10px;
      border: 1px solid #333338;
      border-radius: 8px;
      background: #19191c;
      color: #e4e4e7;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.25;
      white-space: nowrap;
    }
    .phone-feed-controls { flex-wrap: wrap; }
    .phone-feed-controls > :first-child { flex: 1; text-align: left; }
    .phone-control-primary { background: #ededf0; color: #17171a; border-color: transparent; }
    .phone-control:hover, .phone-feed-back:hover { background: #303035; }
    .phone-control-primary:hover { background: #d4d4d8; }
    .phone-preview :is(button, a, input):focus-visible {
      outline: 2px solid #93c5fd;
      outline-offset: 2px;
    }
    .phone-post-heading {
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 10px 12px;
    }
    .phone-post-identity { flex: 1 1 120px; }
    .phone-post-name { overflow-wrap: anywhere; }
    .phone-post-actions { gap: 6px; flex-wrap: wrap; }
    .phone-post-actions .phone-control { min-height: 32px; }
    .phone-post-caption { overflow-wrap: anywhere; }
    .native-photo-wrap { overflow: hidden; background: #101012; }
    .native-post-media {
      display: block;
      width: 100%;
      height: auto;
      max-height: 64vh;
      object-fit: contain;
      background: #101012;
    }
    /* Let media scroll with the feed at its natural aspect ratio. */
    #igPostFeedView .native-post-media {
      max-height: none;
    }
    #igPostFeedView .pin-card-embed-wrap { height: auto; aspect-ratio: 4 / 5; }
    #igPostFeedView .pin-card-embed-wrap iframe { height: calc(100% + 110px); }
    .phone-only > header,
    .phone-only .planner-workspace > :not(.planner-phone),
    .phone-only .planner-phone > :not(.phone-preview),
    .phone-only :is(.cell-hover-bar, .btn-card-replace, #btnHeaderPlusPost, #btnHeaderMenu,
      #btnToggleHeaderEdit, #btnQuickAddFromProfile, #btnFeedViewUploadNew, #navBtnDirect,
      #btnAddStoryDummy, #btnEmptyAddPost, #btnGlobalAudioToggleHeader, #btnChangeAvatarHeader > span) {
      display: none;
    }
    .phone-only .planner-workspace {
      display: grid;
      place-items: center;
      min-height: 100dvh;
      padding: 12px;
    }
    .phone-only .planner-phone { width: 100%; grid-column: 1 / -1; }
    .phone-only .phone-preview { height: min(780px, calc(100dvh - 24px)); }
    @media (max-width: 480px) {
      .phone-only .planner-workspace { padding: 0; }
      .phone-only .phone-preview {
        max-width: none;
        height: 100dvh;
        border: 0;
        border-radius: 0;
      }
    }
    @media (max-width: 420px) {
      .phone-click-controls { flex-wrap: wrap; }
      .phone-click-controls > div { flex-basis: 100%; }
      .phone-preview { border-width: 4px; border-radius: 28px; }
    }
    /* Double-tap heart pop animation */
    @keyframes heartPop {
      0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
      30% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
      60% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
    }
    .heart-burst {
      animation: heartPop 0.85s ease-out forwards;
    }