:root {
  --bg-color: #ffffff;
  --bg-color-grad-color: #ffffff;
  --mentionbg-color: #f8f8f8;
  --mentionbg-color-grad-color: #f8f8f8;
  --rtbg-color: #f8f8f8;
  --rtbg-color-grad-color: #f8f8f8;
  --title-color: #000000;
  --date-color: #666666;
  --body-color: #000000;
  --mention-color: #2b5c45;
  --mytweet-color: #2b5c45;
  --read-color: #666666;
  --url-color: #1da1f2;
  --cw-color: #ceb95f;
  --more-color: #666666;
  --statusbar-color: #333333;
  --actionbar-color: #333333;
  --actionbar-text-color: #000000;
  --tab-color: #1d9bf0;
  /* 背景色の輝度から自動算出する文字色(JS側で設定する) */
  --tab-text-color: #212121;
  --statusbar-text-color: #EEEEEE;
  --cw-text-color: #212121;
  --more-text-color: #EEEEEE;
  --mymsgbg-text-color: #FFFFFF;
  --otmsgbg-text-color: #212121;
  /* 投稿間の区切り線。テーマの divider に連動する(--border-color は設定パネルの枠線用) */
  --divider-color: #cccccc;
  --text-color: #000000;
  --accent-color: #1d9bf0;
  --border-color: #dddddd;
  --mymsgbg-color: #f0f0ff;
  --otmsgbg-color: #f8f0f0;
  /* タブインジケータ */
  --tabind-color: #00aa00;
  /* タイムラインのアクションボタン */
  --tlaction-color: #888888;
  /* 下部ツールバーのボタン */
  --toolbarbtn-color: #909090;
  /* フォーカス枠・スクロールバー・丸ボタン(FAB) */
  --fab-color: #33b5e5;
  /* FABの背景色の輝度から自動算出するアイコン色(JS側で設定する) */
  --fab-text-color: #212121;
  /* Misskeyリアクション済みアイコン */
  --mkyreacted-color: #5db300;

  /* Material Design カラーパレット */
  --md-sys-color-red-50: #FFEBEE;
  --md-sys-color-red-100: #FFCDD2;
  --md-sys-color-red-200: #EF9A9A;
  --md-sys-color-red-300: #E57373;
  --md-sys-color-red-400: #EF5350;
  --md-sys-color-red-500: #F44336;
  --md-sys-color-red-600: #E53935;
  --md-sys-color-red-700: #D32F2F;
  --md-sys-color-red-800: #C62828;
  --md-sys-color-red-900: #B71C1C;
  --md-sys-color-red-A100: #FF8A80;
  --md-sys-color-red-A200: #FF5252;
  --md-sys-color-red-A400: #FF1744;
  --md-sys-color-red-A700: #D50000;

  --md-sys-color-pink-50: #FCE4EC;
  --md-sys-color-pink-100: #F8BBD0;
  --md-sys-color-pink-200: #F48FB1;
  --md-sys-color-pink-300: #F06292;
  --md-sys-color-pink-400: #EC407A;
  --md-sys-color-pink-500: #E91E63;
  --md-sys-color-pink-600: #D81B60;
  --md-sys-color-pink-700: #C2185B;
  --md-sys-color-pink-800: #AD1457;
  --md-sys-color-pink-900: #880E4F;
  --md-sys-color-pink-A100: #FF80AB;
  --md-sys-color-pink-A200: #FF4081;
  --md-sys-color-pink-A400: #F50057;
  --md-sys-color-pink-A700: #C51162;

  --md-sys-color-purple-50: #F3E5F5;
  --md-sys-color-purple-100: #E1BEE7;
  --md-sys-color-purple-200: #CE93D8;
  --md-sys-color-purple-300: #BA68C8;
  --md-sys-color-purple-400: #AB47BC;
  --md-sys-color-purple-500: #9C27B0;
  --md-sys-color-purple-600: #8E24AA;
  --md-sys-color-purple-700: #7B1FA2;
  --md-sys-color-purple-800: #6A1B9A;
  --md-sys-color-purple-900: #4A148C;
  --md-sys-color-purple-A100: #EA80FC;
  --md-sys-color-purple-A200: #E040FB;
  --md-sys-color-purple-A400: #D500F9;
  --md-sys-color-purple-A700: #AA00FF;

  --md-sys-color-deep-purple-50: #EDE7F6;
  --md-sys-color-deep-purple-100: #D1C4E9;
  --md-sys-color-deep-purple-200: #B39DDB;
  --md-sys-color-deep-purple-300: #9575CD;
  --md-sys-color-deep-purple-400: #7E57C2;
  --md-sys-color-deep-purple-500: #673AB7;
  --md-sys-color-deep-purple-600: #5E35B1;
  --md-sys-color-deep-purple-700: #512DA8;
  --md-sys-color-deep-purple-800: #4527A0;
  --md-sys-color-deep-purple-900: #311B92;
  --md-sys-color-deep-purple-A100: #B388FF;
  --md-sys-color-deep-purple-A200: #7C4DFF;
  --md-sys-color-deep-purple-A400: #651FFF;
  --md-sys-color-deep-purple-A700: #6200EA;

  --md-sys-color-indigo-50: #E8EAF6;
  --md-sys-color-indigo-100: #C5CAE9;
  --md-sys-color-indigo-200: #9FA8DA;
  --md-sys-color-indigo-300: #7986CB;
  --md-sys-color-indigo-400: #5C6BC0;
  --md-sys-color-indigo-500: #3F51B5;
  --md-sys-color-indigo-600: #3949AB;
  --md-sys-color-indigo-700: #303F9F;
  --md-sys-color-indigo-800: #283593;
  --md-sys-color-indigo-900: #1A237E;
  --md-sys-color-indigo-A100: #8C9EFF;
  --md-sys-color-indigo-A200: #536DFF;
  --md-sys-color-indigo-A400: #3D5AFE;
  --md-sys-color-indigo-A700: #304FFE;

  --md-sys-color-blue-50: #E3F2FD;
  --md-sys-color-blue-100: #BBDEFB;
  --md-sys-color-blue-200: #90CAF9;
  --md-sys-color-blue-300: #64B5F6;
  --md-sys-color-blue-400: #42A5F5;
  --md-sys-color-blue-500: #2196F3;
  --md-sys-color-blue-600: #1E88E5;
  --md-sys-color-blue-700: #1976D2;
  --md-sys-color-blue-800: #1565C0;
  --md-sys-color-blue-900: #0D47A1;
  --md-sys-color-blue-A100: #82B1FF;
  --md-sys-color-blue-A200: #448AFF;
  --md-sys-color-blue-A400: #2979FF;
  --md-sys-color-blue-A700: #2962FF;

  --md-sys-color-light-blue-50: #E1F5FE;
  --md-sys-color-light-blue-100: #B3E5FC;
  --md-sys-color-light-blue-200: #81D4FA;
  --md-sys-color-light-blue-300: #4FC3F7;
  --md-sys-color-light-blue-400: #29B6F6;
  --md-sys-color-light-blue-500: #03A9F4;
  --md-sys-color-light-blue-600: #039BE5;
  --md-sys-color-light-blue-700: #0288D1;
  --md-sys-color-light-blue-800: #0277BD;
  --md-sys-color-light-blue-900: #01579B;
  --md-sys-color-light-blue-A100: #80D8FF;
  --md-sys-color-light-blue-A200: #40C4FF;
  --md-sys-color-light-blue-A400: #00B0FF;
  --md-sys-color-light-blue-A700: #0091EA;

  --md-sys-color-cyan-50: #E0F7FA;
  --md-sys-color-cyan-100: #B2EBF2;
  --md-sys-color-cyan-200: #80DEEA;
  --md-sys-color-cyan-300: #4DD0E1;
  --md-sys-color-cyan-400: #26C6DA;
  --md-sys-color-cyan-500: #00BCD4;
  --md-sys-color-cyan-600: #00ACC1;
  --md-sys-color-cyan-700: #0097A7;
  --md-sys-color-cyan-800: #00838F;
  --md-sys-color-cyan-900: #006064;
  --md-sys-color-cyan-A100: #84FFFF;
  --md-sys-color-cyan-A200: #18FFFF;
  --md-sys-color-cyan-A400: #00E5FF;
  --md-sys-color-cyan-A700: #00B8D4;

  --md-sys-color-teal-50: #E0F2F1;
  --md-sys-color-teal-100: #B2DFDB;
  --md-sys-color-teal-200: #80CBC4;
  --md-sys-color-teal-300: #4DB6AC;
  --md-sys-color-teal-400: #26A69A;
  --md-sys-color-teal-500: #009688;
  --md-sys-color-teal-600: #00897B;
  --md-sys-color-teal-700: #00796B;
  --md-sys-color-teal-800: #00695C;
  --md-sys-color-teal-900: #004D40;
  --md-sys-color-teal-A100: #A7FFEB;
  --md-sys-color-teal-A200: #64FFDA;
  --md-sys-color-teal-A400: #1DE9B6;
  --md-sys-color-teal-A700: #00BFA5;

  --md-sys-color-green-50: #E8F5E9;
  --md-sys-color-green-100: #C8E6C9;
  --md-sys-color-green-200: #A5D6A7;
  --md-sys-color-green-300: #81C784;
  --md-sys-color-green-400: #66BB6A;
  --md-sys-color-green-500: #4CAF50;
  --md-sys-color-green-600: #43A047;
  --md-sys-color-green-700: #388E3C;
  --md-sys-color-green-800: #2E7D32;
  --md-sys-color-green-900: #1B5E20;
  --md-sys-color-green-A100: #B9F6CA;
  --md-sys-color-green-A200: #69F0AE;
  --md-sys-color-green-A400: #00E676;
  --md-sys-color-green-A700: #00C853;

  --md-sys-color-light-green-50: #F1F8E9;
  --md-sys-color-light-green-100: #DCEDC8;
  --md-sys-color-light-green-200: #C5E1A5;
  --md-sys-color-light-green-300: #AED581;
  --md-sys-color-light-green-400: #9CCC65;
  --md-sys-color-light-green-500: #8BC34A;
  --md-sys-color-light-green-600: #7CB342;
  --md-sys-color-light-green-700: #689F38;
  --md-sys-color-light-green-800: #558B2F;
  --md-sys-color-light-green-900: #33691E;
  --md-sys-color-light-green-A100: #CCFF90;
  --md-sys-color-light-green-A200: #B2FF59;
  --md-sys-color-light-green-A400: #82F93D;
  --md-sys-color-light-green-A700: #64DD17;

  --md-sys-color-lime-50: #F9FBE7;
  --md-sys-color-lime-100: #F0F4C3;
  --md-sys-color-lime-200: #E6EE9C;
  --md-sys-color-lime-300: #DCE775;
  --md-sys-color-lime-400: #D4E157;
  --md-sys-color-lime-500: #CDDC39;
  --md-sys-color-lime-600: #C0CA33;
  --md-sys-color-lime-700: #AFB42B;
  --md-sys-color-lime-800: #9E9D24;
  --md-sys-color-lime-900: #827717;
  --md-sys-color-lime-A100: #F4FF81;
  --md-sys-color-lime-A200: #EEFF41;
  --md-sys-color-lime-A400: #C6FF00;
  --md-sys-color-lime-A700: #AEEA00;

  --md-sys-color-yellow-50: #FFFDE7;
  --md-sys-color-yellow-100: #FFF9C4;
  --md-sys-color-yellow-200: #FFF59D;
  --md-sys-color-yellow-300: #FFF176;
  --md-sys-color-yellow-400: #FFEE58;
  --md-sys-color-yellow-500: #FFEB3B;
  --md-sys-color-yellow-600: #FDD835;
  --md-sys-color-yellow-700: #FBC02D;
  --md-sys-color-yellow-800: #F9A825;
  --md-sys-color-yellow-900: #F57F17;
  --md-sys-color-yellow-A100: #FFFF8D;
  --md-sys-color-yellow-A200: #FFFF00;
  --md-sys-color-yellow-A400: #FFEA00;
  --md-sys-color-yellow-A700: #FFD600;

  --md-sys-color-amber-50: #FFF8E1;
  --md-sys-color-amber-100: #FFECB3;
  --md-sys-color-amber-200: #FFE082;
  --md-sys-color-amber-300: #FFD54F;
  --md-sys-color-amber-400: #FFCA28;
  --md-sys-color-amber-500: #FFC107;
  --md-sys-color-amber-600: #FFB300;
  --md-sys-color-amber-700: #FFA000;
  --md-sys-color-amber-800: #FF8F00;
  --md-sys-color-amber-900: #FF6F00;
  --md-sys-color-amber-A100: #FFE57F;
  --md-sys-color-amber-A200: #FFD740;
  --md-sys-color-amber-A400: #FFC400;
  --md-sys-color-amber-A700: #FFAB00;

  --md-sys-color-orange-50: #FFF3E0;
  --md-sys-color-orange-100: #FFE0B2;
  --md-sys-color-orange-200: #FFCC80;
  --md-sys-color-orange-300: #FFB74D;
  --md-sys-color-orange-400: #FFA726;
  --md-sys-color-orange-500: #FF9800;
  --md-sys-color-orange-600: #FB8C00;
  --md-sys-color-orange-700: #F57C00;
  --md-sys-color-orange-800: #EF6C00;
  --md-sys-color-orange-900: #E65100;
  --md-sys-color-orange-A100: #FFD180;
  --md-sys-color-orange-A200: #FFAB40;
  --md-sys-color-orange-A400: #FF9100;
  --md-sys-color-orange-A700: #FF6D00;

  --md-sys-color-deep-orange-50: #FBE9E7;
  --md-sys-color-deep-orange-100: #FFCCBC;
  --md-sys-color-deep-orange-200: #FFAB91;
  --md-sys-color-deep-orange-300: #FF8A65;
  --md-sys-color-deep-orange-400: #FF7043;
  --md-sys-color-deep-orange-500: #FF5722;
  --md-sys-color-deep-orange-600: #F4511E;
  --md-sys-color-deep-orange-700: #E64A19;
  --md-sys-color-deep-orange-800: #D84315;
  --md-sys-color-deep-orange-900: #BF360C;
  --md-sys-color-deep-orange-A100: #FF9E80;
  --md-sys-color-deep-orange-A200: #FF6E40;
  --md-sys-color-deep-orange-A400: #FF3D00;
  --md-sys-color-deep-orange-A700: #DD2C00;

  --md-sys-color-brown-50: #EFEBE9;
  --md-sys-color-brown-100: #D7CCC8;
  --md-sys-color-brown-200: #BCAAA4;
  --md-sys-color-brown-300: #A1887F;
  --md-sys-color-brown-400: #8D6E63;
  --md-sys-color-brown-500: #795548;
  --md-sys-color-brown-600: #6D4C41;
  --md-sys-color-brown-700: #5D4037;
  --md-sys-color-brown-800: #4E342E;
  --md-sys-color-brown-900: #3E2723;

  --md-sys-color-grey-50: #FAFAFA;
  --md-sys-color-grey-100: #F5F5F5;
  --md-sys-color-grey-200: #EEEEEE;
  --md-sys-color-grey-300: #E0E0E0;
  --md-sys-color-grey-400: #BDBDBD;
  --md-sys-color-grey-500: #9E9E9E;
  --md-sys-color-grey-600: #757575;
  --md-sys-color-grey-700: #616161;
  --md-sys-color-grey-800: #424242;
  --md-sys-color-grey-900: #212121;

  --md-sys-color-blue-grey-50: #ECEFF1;
  --md-sys-color-blue-grey-100: #CFD8DC;
  --md-sys-color-blue-grey-200: #B0BEC5;
  --md-sys-color-blue-grey-300: #90A4AE;
  --md-sys-color-blue-grey-400: #78909C;
  --md-sys-color-blue-grey-500: #607D8B;
  --md-sys-color-blue-grey-600: #546E7A;
  --md-sys-color-blue-grey-700: #455A64;
  --md-sys-color-blue-grey-800: #37474F;
  --md-sys-color-blue-grey-900: #263238;
  --md-sys-color-black: #000000;
  --md-sys-color-white: #FFFFFF;

}

.timeline-post {
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider-color);
  background-color: var(--bg-color);
  position: relative;
  background-image: linear-gradient(to bottom,
      var(--bg-color),
      color-mix(in srgb, var(--bg-color) 50%, var(--bg-color-grad-color) 50%));
}

/* カラーラベル(Classicスタイル: 投稿の左端に全高で表示する) */
/* 色は post ごとにインラインの --post-color-label で指定する(未指定なら透明) */
.timeline-post::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background-color: var(--post-color-label, transparent);
}

/* 会話ツリーの縦線(アバター中心を通る) */
/* x位置 = 投稿の左パディング(16px) + アバター(48px)の半分 */
.timeline-post.connector-start::after,
.timeline-post.connector-end::after {
  content: "";
  position: absolute;
  left: calc(16px + 24px);
  transform: translateX(-1px);
  width: 2px;
  background-color: var(--divider-color);
}

/* 下向きの線(アバター中心 → 行の下端) */
.timeline-post.connector-start::after {
  top: calc(12px + 24px);
  bottom: 0;
}

/* 上向きの線(行の上端 → アバター中心) */
.timeline-post.connector-end::after {
  top: 0;
  height: calc(12px + 24px);
}

/* 縦線で次の行と繋がっている場合は投稿間の区切り線を描かない(アプリと同じ挙動) */
.timeline-post.connector-start {
  border-bottom: none;
}

/* フォーカス枠(Desktop版のキーボードフォーカス) */
.timeline-post:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.timeline-post.mention {
  background-color: var(--mentionbg-color);
  background-image: linear-gradient(to bottom,
      var(--mentionbg-color),
      color-mix(in srgb, var(--mentionbg-color), var(--mentionbg-color-grad-color)));
}

.user-info {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.user-name {
  font-weight: bold;
  color: var(--title-color);
  text-decoration: none;
}

.user-name:hover {
  text-decoration: underline;
}

.user-name.read {
  color: var(--read-color);
}

.user-id {
  color: var(--date-color);
  text-decoration: none;
  font-size: 0.9rem;
}

.url {
  color: var(--url-color);
  text-decoration: underline;
}

.hashtag {
  color: var(--url-color);
  text-decoration: none;
}

.hashtag:hover {
  text-decoration: underline;
}

.post-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.post-time {
  color: var(--date-color);
  text-decoration: none;
  font-size: 0.9em;
}

.post-time:hover {
  text-decoration: underline;
}

.post-text {
  color: var(--body-color);
  margin-bottom: 8px;
  white-space: pre-wrap;
}

.post-text.mention {
  color: var(--mention-color);
}

.post-text.mytweet {
  color: var(--mytweet-color);
}

.post-text.read {
  color: var(--read-color);
}

.action-button {
  color: #536471;
  border: none;
  background: none;
  padding: 0;
  font-size: 0.9rem;
}

.action-button:hover {
  color: #1d9bf0;
}

.color-preview {
  height: 100px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-bottom: 1rem;
  background-color: var(--bg-color);
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.timeline {
  border: none;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  background-color: var(--bg-color);
}

.app-header {
  background: #1d9bf0;
  width: 100%;
  color: white;
  padding: 12px 16px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  margin: 0 auto;
  text-align: center;
  font-size: 1.1rem;
}

.preview-container {
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.status-bar {
  background-color: var(--statusbar-color);
  padding: 2px 8px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--statusbar-text-color);
}

.status-bar-icons {
  display: flex;
  gap: 4px;
}

.web-source {
  /* アプリの「◯◯から」は日付と同じ dateTextColor (SourceAppArea.kt) */
  color: var(--date-color);
  text-decoration: none;
  font-size: 0.9em;
}

.post-image {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
}

.post-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px;
  margin-bottom: 8px;
}

.post-images img {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
}

.boost-header {
  padding: 4px 0 0 64px;
  /* アプリのリポスト/ブースト行は未読時 titleTextColor (UniversalRepostedByLine.kt) */
  color: var(--title-color);
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.boost-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.app-title {
  background-color: var(--actionbar-color);
  color: var(--actionbar-text-color);
}

.app-title .btn-link {
  color: var(--actionbar-text-color);
  text-decoration: none;
}

.app-tab {
  background-color: var(--tab-color);
  padding: 8px 16px;
  font-weight: bold;
  color: var(--tab-text-color);
  text-align: center;
  font-size: 1.1rem;
  position: relative;
}

/* タブインジケータ(アプリは高さ3dp・中央寄せ・最大幅200dp) */
.app-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 200px;
  height: 3px;
  background-color: var(--tabind-color);
}

.timeline-item {
  padding: 10px 16px;
  border-bottom: 1px solid #ddd;
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.timeline-name {
  font-weight: bold;
  margin-right: 8px;
}

.timeline-username,
.timeline-time {
  color: #666;
  font-size: 0.9em;
}

.timeline-content {
  margin-bottom: 8px;
}

.timeline-actions {
  display: flex;
  gap: 16px;
  color: #666;
}

.timeline-post.rt {
  background-color: var(--rtbg-color);
  background-image: linear-gradient(to bottom,
      var(--rtbg-color),
      color-mix(in srgb, var(--rtbg-color), var(--rtbg-color-grad-color)));
}

.timeline-post:last-child {
  border-bottom: none;
}

/* 「もっと見る」ボタン。アプリの ScreenButton に合わせる
   (テーマ色は背景に使い、文字色は背景の輝度から自動算出する) */
.screen-button {
  display: inline-block;
  min-width: 64px;
  min-height: 18px;
  margin: 2px 0 6px;
  padding: 6px 16px;
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.more-button {
  background-color: var(--more-color);
  color: var(--more-text-color);
}

.cw-button {
  background-color: var(--cw-color);
  color: var(--cw-text-color);
}

/* 折りたたまれた長文(「もっと見る」ボタンで展開される想定の表示) */
.post-text.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.color-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.color-picker-panel {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 90vw;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  /* 縦スクロールバーの領域を常に確保する。
     これが無いと「スクロールバー出現 -> 幅が縮む -> セルが小さくなる ->
     aspect-ratio で全体が低くなる -> スクロールバーが消える -> 幅が戻る」
     というループでレイアウトがガタつく */
  scrollbar-gutter: stable;
}

.color-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 15px;
  /* 画面が狭いときはセルを縮めずに横スクロールさせる
     (縮めると文字幅で止まり、行ごとに幅が変わって列が揃わなくなるため) */
  overflow-x: auto;
}

.color-row {
  display: flex;
  gap: 2px;
  align-items: center;
  /* パレットの寸法。フォント幅に依存させないため計算で持つ */
  --palette-cell-size: 34px;
  --palette-gap: 2px;
  --palette-label-width: 100px;
  /* 親の幅に収まろうとして潰れないように内容の幅を確保する。
     max-content にすると "A100" 等の文字幅で1px単位にぶれ、広い画面でも
     横スクロールバーが出たり消えたりしてレイアウトが揺れるため計算値にする
     (内訳: 色名 + gap 14個 + セル14個) */
  min-width: calc(var(--palette-label-width) + 14 * var(--palette-gap) + 14 * var(--palette-cell-size));
}

.color-row-label {
  width: var(--palette-label-width);
  flex: 0 0 var(--palette-label-width);
  font-size: 0.8rem;
  color: #666;
  text-align: right;
  padding-right: 8px;
  /* 横スクロールしても色名が見えるように左端に固定する */
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 3;
}

.color-cells {
  display: flex;
  gap: 2px;
  flex-grow: 1;
}

.color-cell {
  /* 広い画面では均等に伸び、狭い画面でも 34px より縮まないようにする。
     min-width:0 が無いと "A100" などの文字幅が下限になり、セルごとに幅がずれる */
  flex: 1 0 var(--palette-cell-size);
  min-width: 0;
  aspect-ratio: 1;
  cursor: pointer;
  color: #444;
  font-size: 0.8rem;
  text-align: center;
  border: 1px solid #ddd;
  transition: box-shadow 0.1s;
}

.color-cell.empty {
  cursor: default;
  background-color: #fff;
  border: 1px solid #fff;
}

/* hover は transform: scale() を使わない。
   拡大した分がスクロール領域に含まれて横スクロールバーが出入りし、
   レイアウトがガタつくため、はみ出しても影響しない box-shadow で表現する */
.color-cell:not(.empty):hover {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.65);
  z-index: 2;
}

.color-cell.selected:not(.empty):hover {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000, 0 0 0 3px rgba(0, 0, 0, 0.65);
}

/* 現在入力されている色。どの色の上でも見えるように白と黒の二重枠にする */
.color-cell.selected {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000;
  z-index: 2;
}

/* ラベル行(左:項目名 / 右:カラーコード入力) */
.form-label-with-hex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

/* カラーコードの表示・入力欄 */
.color-hex-input {
  width: 8em;
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  text-align: center;
  text-transform: uppercase;
}

.color-hex-input:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* 不正なカラーコードを入力中 */
.color-hex-input.invalid {
  border-color: #e53935;
  color: #e53935;
}

.color-picker-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

.color-picker-button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.color-picker-button.cancel {
  background: #f0f0f0;
}

.color-picker-button.apply {
  background: #007bff;
  color: white;
}

/* カラー選択部分のスタイル */
.form-control-color {
  position: relative;
  cursor: pointer;
  z-index: 1;
  /* 重なり順を下げる */
}

.form-control-color::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 10%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1));
  pointer-events: none;
  border-left: 1px solid #ddd;
}

.form-control-color::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 10%;
  height: 100%;
  background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.1));
  pointer-events: none;
  border-right: 1px solid #ddd;
}

.color-input-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.custom-picker-overlay,
.native-picker-overlay,
.reset-picker-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  /* 重なり順を上げる */
}

.native-picker-overlay {
  left: 0;
  width: 10%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
}

.native-picker-overlay:hover {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent);
}

.custom-picker-overlay {
  left: 10%;
  width: 80%;
}

.reset-picker-overlay {
  right: 0;
  width: 10%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.05), transparent);
}

.reset-picker-overlay:hover {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
}

/* ヘッダースタイル */
.lead {
  color: var(--body-color);
  opacity: 0.85;
}

@media (max-width: 576px) {
  .lead {
    font-size: 1rem;
  }

  .color-picker-panel {
    padding: 12px;
  }

  .color-row {
    --palette-label-width: 72px;
  }

  .color-row-label {
    font-size: 0.7rem;
    padding-right: 6px;
  }
}


.share-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.2s;
}

.share-button:hover {
  background-color: #ccc;
}

.fa-brands,
.fa-solid {
  color: #333;
}

textarea {
  width: 100%;
  height: 80px;
  padding: 8px;
  font-size: 14px;
  resize: vertical;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/*--------------------------------------------------
 * タイムラインのアクションボタン行
 *--------------------------------------------------*/
.post-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.post-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tlaction-color);
  font-size: 0.85rem;
  line-height: 1;
}

.post-action i {
  font-size: 1rem;
  line-height: 1;
}

/* 活性状態のアイコンはテーマに連動しない固定色(アプリの仕様) */
/* いいね済 = COLOR_HEART, リポスト済 = COLOR_GREEN */
.post-action.liked i {
  color: #E81C4F;
}

.post-action.reposted i {
  color: #009944;
}

/* 数字はアプリと同様に活性・未活性を問わずアクションボタンの色を使う */
.post-action-count {
  color: var(--tlaction-color);
}

/*--------------------------------------------------
 * 絵文字リアクションのチップ(Misskey/Mastodon)
 *--------------------------------------------------*/
.post-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.4;
  /* 枠線はテーマに連動しない固定色(アプリの COLOR_GRAY2) */
  border: 1px solid #808080;
  /* 未リアクションは行背景にグレー(0x888888)を薄く合成する */
  background-color: color-mix(in srgb, #888888 12.5%, var(--bg-color));
}

.reaction-count {
  color: var(--read-color);
}

.reaction-chip.reacted {
  background-color: var(--mkyreacted-color);
}

.reaction-chip.reacted .reaction-count {
  /* リアクション済みの数字はアプリの仕様で固定色 */
  color: #1a1a1a;
}

/*--------------------------------------------------
 * タイムライン領域(スクロールバー・FABの重ね合わせ用)
 *--------------------------------------------------*/
.timeline-area {
  position: relative;
  background-color: var(--bg-color);
  /* .timeline の下マージンが外側に抜けない(マージン相殺しない)ようにする */
  overflow: hidden;
}

/* スクロールバー(Desktop版は常時表示のため飾りとして固定表示する) */
.preview-scrollbar {
  position: absolute;
  top: 8px;
  bottom: 8px;
  /* 投稿の右パディング(16px)より内側に収めて、日時などのテキストに重ならないようにする */
  right: 2px;
  width: 6px;
  border-radius: 3px;
  /* アプリのトラックは bgColor だが、リスト全体が bgColor なので実機では背景と同化して見えない。
     プレビューには自分宛の返信/RTの背景色を持つ行があり、bgColor だと縦帯として浮くため透明にする */
  background-color: transparent;
  pointer-events: none;
}

.preview-scrollbar-thumb {
  width: 100%;
  height: 30%;
  border-radius: 3px;
  background-color: var(--fab-color);
}

/* FAB(丸ボタン) */
.preview-fab {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--fab-color);
  /* アイコン色は背景輝度から自動算出する(JS側で設定する) */
  color: var(--fab-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/*--------------------------------------------------
 * チャットのプレビュー(Bluesky)
 *--------------------------------------------------*/
.chat-preview {
  background-color: var(--bg-color);
  border-top: 1px solid var(--divider-color);
  padding: 4px 0 6px;
}

.chat-message {
  display: flex;
  padding: 8px 8px 2px;
}

.chat-message.mine {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: 78%;
  padding: 8px 14px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* 吹き出しの角丸はアプリに合わせる(自分は右下、相手は左下だけ角を落とす) */
.chat-message.mine .chat-bubble {
  background-color: var(--mymsgbg-color);
  color: var(--mymsgbg-text-color);
  border-radius: 16px 16px 0 16px;
}

.chat-message.other .chat-bubble {
  background-color: var(--otmsgbg-color);
  color: var(--otmsgbg-text-color);
  border-radius: 16px 16px 16px 0;
}

/*--------------------------------------------------
 * 下部ツールバー
 *--------------------------------------------------*/
.bottom-toolbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 0;
  background-color: var(--bg-color);
  border-top: 1px solid var(--divider-color);
}

.bottom-toolbar-button {
  border: none;
  background: none;
  padding: 4px 8px;
  line-height: 1;
  color: var(--toolbarbtn-color);
  font-size: 1.15rem;
}