/* =================================================================
   1. 画面全体：元のしっかりとしたチャコールグレーに統一
   ================================================================= */
#mastodon, .app-holder, .app-body, .ui,
.column, .drawer__inner, .scrollable, .detailed-status, .status,
.columns-area, .columns-area--scrollable, .content-wrapper,
.tabs-bar__wrapper, .tabs-bar, .getting-started__wrapper, .getting-started, .sidebar,
.trends__card, .search-results, .search-page__wrapper {
    background: #2b2b2b !important;
    background-color: #2b2b2b !important;
}

/* ヘッダー部分は背景より少しだけ明るく */
.column-header, .column-header__button {
    background-color: #353535 !important;
}

/* =================================================================
   2. 文字・アイコン：目に優しいシルキーグレー（チカチカ防止）
   ================================================================= */
.status__content, .status__content p,
.status__display-name strong, .account__display-name strong,
.column-header, .column-header__button, .icon-button,
.trends__card__name a, .trends__card__current,
.tabs-bar__link, .tabs-bar__link i, .tabs-bar__link span,
.getting-started__footer a, .getting-started__footer p,
.status__relative-time, .status__visibility-icon, .detailed-status__meta {
    color: #d1d1d1 !important;
    opacity: 0.95 !important;
}

/* =================================================================
   3. リンク・ハッシュタグ：背景とグラデーションになるミストブルー
   ================================================================= */
a, .status__content a, .reply-indicator__content a, 
.status__display-name .username, .account__display-name .username,
.mention, .hashtag, .tabs-bar__link.active, .tabs-bar__link.active i {
    color: #6a7f93 !important;
}

/* =================================================================
   4. 投稿フォーム：背景と文字色を統一
   ================================================================= */
.autosuggest-textarea__textarea, 
.compose-form__autosuggest-wrapper textarea,
.compose-form__sensitive-button .focusable,
.reply-indicator {
    background-color: #353535 !important;
    color: #d1d1d1 !important;
    border: 1px solid #4a4a4a !important;
}
.autosuggest-textarea__textarea::placeholder,
.compose-form__autosuggest-wrapper textarea::placeholder {
    color: #8a8a8a !important;
}
.compose-form__modifiers, .compose-form__buttons-wrapper, .character-counter {
    background-color: #2b2b2b !important;
    color: #d1d1d1 !important;
}
.compose-form__publish-button-wrapper button, .button.button-primary {
    background-color: #52667a !important;
    color: #ffffff !important;
}
.compose-form__publish-button-wrapper button:hover, .button.button-primary:hover {
    background-color: #6a7f93 !important;
}

/* =================================================================
   5. 罫線（縦・横）：しっかり濃いめでタイムラインを引き締める
   ================================================================= */
/* 横の区切り線 */
.status, .detailed-status, .focusable {
    border-bottom: 1px solid #1a1a1a !important;
}
.column-header {
    border-bottom: 2px solid #111111 !important;
}
/* 縦の区切り線 */
.column, .drawer {
    border-right: 1px solid #1a1a1a !important;
}
.column-header, .scrollable {
    border-left: 1px solid #1a1a1a !important;
}


/* =================================================================
   6. カスタム絵文字＆通常絵文字の拡大表示設定
   ================================================================= */
/* カスタム絵文字（横長比率を維持） */
.custom-emoji {
    height: 2.2rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* 通常の絵文字（スタンプではなく通常の顔文字や記号など） */
.emojione,
img.emojione,
.status__content img[src*="emoji"],
.reply-indicator__content img[src*="emoji"] {
    height: 2.2rem !important;   /* カスタム絵文字と同じ縦幅に揃えてデカくします */
    width: 2.5rem !important;    /* 通常絵文字は正方形なので横幅も固定 */
    max-width: none !important;
    max-height: none !important;
    vertical-align: middle !important;
    display: inline-block !important;
    margin: 0 2px !important;    /* 隣の文字とくっつきすぎないようにほんの少し隙間を空けます */
}


/* =================================================================
   7. 限定投稿（公開範囲）の色分け設定（確実版）
   ================================================================= */

/* 🔒 ① フォロワー限定投稿（ダイレクト/非公開） */
/* 投稿の左端に細い「渋いオレンジ」の縦線を入れ、背景をほんのり赤みがかったチャコールに */
.status-private,
.status-direct {
    border-left: 4px solid #b45309 !important; /* 左端にアクセントの縦線 */
    background-color: #352d27 !important;     /* ほんのり赤/茶みがかったチャコール */
}

/* 🌐 ② 未収載投稿（アンリステッド） */
/* 投稿の左端に細い「くすみグリーン」の縦線を入れ、背景をほんのり緑みがかったチャコールに */
.status-unlisted {
    border-left: 4px solid #4d7c0f !important; /* 左端にアクセントの縦線 */
    background-color: #2a3424 !important;     /* ほんのり緑みがかったチャコール */
}

/* 枠を適用した際の内側の余白のズレを綺麗に補正 */
.status-private,
.status-direct,
.status-unlisted {
    padding-left: 8px !important; /* 縦線の分、文字を少し右に寄せて綺麗に見せる */
}


/* =================================================================
   8. 公開範囲アイコン（🔒・🌙）のピンポイント色変え設定
   ================================================================= */

/* 🔒 フォロワー限定投稿の「鍵アイコン」の色 */
.status-private .status__visibility-icon i.fa-lock,
.status-direct .status__visibility-icon i.fa-envelope,
.status-private .status__relative-time .status__visibility-icon {
    color: #f59e0b !important; /* 明るめのアンバー（ゴールド）にして視認性をアップ */
}

/* 🌙 未収載投稿の「地球儀/鍵開けアイコン」の色（※🌙マーク等に割り当てられている場合もここです） */
.status-unlisted .status__visibility-icon i.fa-unlock,
.status-unlisted .status__visibility-icon i.fa-globe,
.status-unlisted .status__relative-time .status__visibility-icon {
    color: #84cc16 !important; /* 明るめのライムグリーンにして未収載とわかりやすく */
}


/* =================================================================
   9. お気に入り（☆）マークのピンポイント色変え設定（SVG/フォント両対応）
   ================================================================= */
/* 自分がすでにお気に入り（Fav）した状態のボタンを鮮やかな金色にする */
.star-icon.active,
.star-icon.activate,
.button.favourited,
button[title*="お気に入り"].active,
button[aria-label*="お気に入り"].active {
    /* ① アイコンフォント（i）の場合の色変え */
    color: #eab308 !important;
}

/* ② 【本命】星マークがSVG画像だった場合、強制的にゴールドで塗りつぶす */
.star-icon.active svg,
.star-icon.activate svg,
button[title*="お気に入り"].active svg,
button[aria-label*="お気に入り"].active svg,
.star-icon.active path,
.star-icon.activate path {
    fill: #eab308 !important;   /* 鮮やかなイエローゴールドで塗りつぶし */
    color: #eab308 !important;
    opacity: 1 !important;       /* 透明度を解除 */
}


/* =================================================================
   10. タイムライン更新バー（上部グラデーション）の色変え設定
   ================================================================= */
/* 新しい投稿があるときに上部に表示されるバー・グラデーションの背景色 */
.load-more,
.timeline-hint,
.tabs-bar__wrapper::after,
button.load-gap {
    background: linear-gradient(to right, #2b2b2b, #4b5d70, #2b2b2b) !important; /* 両端はチャコール、中央はミストブルー */
    background-color: #4b5d70 !important;
    border-color: #52667a !important;
}

/* 更新バーの中に表示される文字（「新しい投稿」など）の色 */
.load-more span,
.load-more button,
.timeline-hint span,
button.load-gap {
    color: #d1d1d1 !important; /* 目に優しいシルキーグレー */
    font-weight: bold !important;
}

/* マウスを乗せた（ホバー）ときは少し明るくしてわかりやすく */
.load-more:hover,
button.load-gap:hover {
    background: #52667a !important;
    background-color: #52667a !important;
}