/* ==========================================================================
   XColumn カスタムCSS例文集
   ==========================================================================
   今までX(旧Twitter)等でご案内したカスタムCSSのまとめです。
   メニューの「ツール」→「設定」→「カスタムCSS」にコピペしてご使用ください。
   ※必要に応じて数値（pxや%）を変更し、お好みの表示に調整してください。
*/

/* --------------------------------------------------------------------------
   1. ヘッダー周りの簡略化・省スペース化
   -------------------------------------------------------------------------- */

/* カラム上部の「ホーム」等のタイトル行（一番上の太字部分）を非表示にする */
[data-testid="primaryColumn"] > div > div:first-child > div:first-child div:has(h2[role="heading"]) {
    display: none !important;
}

/* タブ（おすすめ/フォロー中）の高さを低くする */
[data-testid="ScrollSnap-List"] {
    min-height: 36px !important; /* 元は53px程度 */
    height: 36px !important;
}

/* タブ内のリンク領域の余白を詰める */
[data-testid="ScrollSnap-List"] a {
    height: 36px !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* ヘッダー全体の高さ固定を解除して詰める */
[data-testid="primaryColumn"] > div > div:first-child > div:first-child {
    height: auto !important;
    min-height: 0 !important;
}

/* ヘッダーの固定を解除（スクロールと一緒に流れるようにする） */
/* ※常にヘッダーを表示させておきたい場合は、この記述を含めないでください */
[data-testid="primaryColumn"] > div > div:first-child {
    position: static !important;
}


/* --------------------------------------------------------------------------
   2. 画像・動画（添付メディア）の縮小表示
   -------------------------------------------------------------------------- */

/* メディアコンテナ全体の高さを制限する */
div[aria-labelledby] > div:has([data-testid="tweetPhoto"]),
div[aria-labelledby] > div:has([data-testid="videoPlayer"]) {
    max-height: 200px !important; /* ←高さの上限。お好みで調整してください */
    max-width: 80% !important;    /* ←幅の上限。少し狭めています */
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    overflow: hidden !important;  /* はみ出した部分をカット */
    border-radius: 8px !important;
}

/* 画像自体の表示調整 */
[data-testid="tweetPhoto"] img {
    /* 画像全体を枠内に収めたい場合は 'contain'、枠いっぱいに埋めたい場合は 'cover' */
    object-fit: cover !important; 
}


/* --------------------------------------------------------------------------
   3. ポスト間の区切り線（ボーダー）の調整
   -------------------------------------------------------------------------- */

div[data-testid="cellInnerDiv"] {
    /* ボーダーの色 */
    border-bottom-color: #666666 !important; 
    
    /* ボーダーの太さ */
    border-bottom-width: 1px !important;
}