/* ============================================================
   css/chat.css — 購入報告チャット（chat/index.php）レトロUI
     Windows95 風：グレーの窓・ベベル枠・紺のタイトルバー（単色・グラデなし）。
     フォントはドット絵風の DotGothic16（Google Fonts）。当時のビットマップ
     フォントの雰囲気を再現する。無い環境は MSゴシック系へフォールバック。
     角丸0・影なしのサイト標準とも整合（立体感はすべて border で表現）。
     このページのみ意図的にライト固定（レトロ画面の再現のためテーマ非追従）。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

/* PixelMplus12：当時のMSゴシック12pxビットマップを再現したフリーフォント（M+ Font License）。
   12px（または倍の24px）で表示するとドットが正確に揃う。CDN: leafscape.be */
@font-face {
  font-family: 'PixelMplus12';
  src: url('https://cdn.leafscape.be/PixelMplus/PixelMplus12-Regular_web.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PixelMplus12';
  src: url('https://cdn.leafscape.be/PixelMplus/PixelMplus12-Bold_web.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── ページ全体：ヘッダー下の残り高さにチャット窓をフィットさせ、
      ページ自体のスクロールバーを出さない（スクロールはログ内のみ）。
      フッターもこのページでは表示しない。chat.css はチャットページ専用読込のため
      body 直指定でも他ページへは影響しない。 ── */
html { height: 100%; overflow: hidden; scrollbar-gutter: auto; overscroll-behavior: none; }
body {
  height: 100vh;    /* dvh 未対応ブラウザ用フォールバック（無効だと高さ制限が消えて溢れる） */
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;   /* iOSのゴムバンドスクロールの連鎖を抑止 */
  display: flex;
  flex-direction: column;
}
body > .hd { flex: 0 0 auto; }
body > footer.ft { display: none; }

.chat-desk {
  box-sizing: border-box;   /* JSの実測フィット(height指定)と余白計算を枠込みで一致させる */
  --c95-fs: 16px;        /* 画面全体の基準文字サイズ（メニュー「文字サイズ(Z)」でJSが上書き） */
  background: #008080;   /* Windows95 デスクトップのティール単色 */
  /* 左右28px＝ヘッダー内側（.hd-inner）の余白と揃える。
     下は常時表示のタスクバー（高さ 約1.75em＋枠）ぶんの余白を確保 */
  padding: 14px 28px calc(var(--c95-fs, 16px) * 1.75 + 20px);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  position: relative;    /* タスクバー（absolute）の基準 */
}

/* ── タスクバー（常時表示・デスクトップ下端。全画面時とMacスキンのウィンドウ表示中は非表示） ── */
.c95-win[hidden] { display: none; }        /* display:flex が hidden 属性に勝つのを防ぐ */
.c95-taskbar[hidden] { display: none; }
.chat-desk.c95-max .c95-taskbar { display: none; }   /* 全画面時はタスクバーなし */
.c95-taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  background: #c0c0c0;
  border-top: 2px solid #ffffff;   /* Win95タスクバー上端のハイライト */
  padding: 3px 4px;
  font-family: inherit;
}
/* スタートボタン・タスクボタン共通の浮き上がりベベル */
.c95-start,
.c95-task {
  font: inherit; font-size: var(--c95-fs, 16px); color: #000;
  display: inline-flex; align-items: center; gap: 6px;
  height: 1.75em;
  padding: 0 0.5em;
  background: #c0c0c0;
  border: 0;
  box-shadow:
    inset -1px -1px 0 #000000,
    inset  1px  1px 0 #ffffff,
    inset -2px -2px 0 #808080,
    inset  2px  2px 0 #dfdfdf;
  cursor: pointer;
  overflow: hidden; white-space: nowrap;
}
.c95-start:active,
.c95-task:active {
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset  1px  1px 0 #000000,
    inset -2px -2px 0 #dfdfdf,
    inset  2px  2px 0 #808080;
}
.c95-start { flex: 0 0 auto; font-weight: 700; margin-right: 4px; }
.c95-start img { width: 1em; height: 1em; flex: 0 0 auto; }
/* スタート右の区切り（縦の溝＝ハンドル） */
.c95-tb-div {
  flex: 0 0 auto;
  width: 3px; height: 1.75em;
  margin-right: 4px;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #808080;
}
/* タスクボタンは実機らしく固定幅（長すぎない）。狭い画面では縮む */
.c95-task { width: 11em; max-width: 45%; min-width: 0; }
.c95-task img { width: 1em; height: 1em; flex: 0 0 auto; image-rendering: pixelated; }
.c95-task span { overflow: hidden; text-overflow: ellipsis; }
/* ウィンドウ表示中（アクティブ）はタスクボタンがへこむ（Win95の挙動） */
.c95-task.on {
  background: #dfdfdf;
  font-weight: 700;
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset  1px  1px 0 #000000,
    inset -2px -2px 0 #dfdfdf,
    inset  2px  2px 0 #808080;
}

/* ── スタートメニュー（Win95：左の紺バンド＋グレーのメニュー） ── */
.c95-startmenu[hidden] { display: none; }
.c95-startmenu {
  position: absolute;
  left: 4px;
  bottom: 2.6em;             /* タスクバーのすぐ上 */
  z-index: 30;
  display: flex;
  background: #c0c0c0;
  padding: 2px;
  box-shadow:
    inset -1px -1px 0 #000000,
    inset  1px  1px 0 #ffffff,
    inset -2px -2px 0 #808080,
    inset  2px  2px 0 #dfdfdf;
}
.c95-sm-band {
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: #808080;              /* 実機の縦帯はグレー地 */
  color: #3c3c3c;
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 10px 3px;
  display: flex;
  align-items: flex-start;   /* rotate(180deg)後は下寄せ表示になる */
}
.c95-sm-band b { color: #ffffff; font-weight: 400; }
.c95-sm-items { display: flex; flex-direction: column; min-width: 16em; padding: 2px 0; }
.c95-sm-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  font-size: var(--c95-fs, 16px); color: #000;
  padding: 0.4em 0.8em 0.4em 0.5em;
  cursor: default;
  white-space: nowrap;
}
.c95-sm-item:hover { background: #000080; color: #fff; }
.c95-sm-item img { width: 1.6em; height: 1.6em; flex: 0 0 auto; image-rendering: pixelated; }
.c95-sm-arrow { margin-left: auto; font-size: 0.6em; padding-left: 1.5em; }
.c95-sm-sep { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #ffffff; margin: 2px 2px; }
/* サブメニュー（プログラム(P) にホバーで展開。実機同様わずかな遅延を挟む） */
.c95-sm-sub {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.35s, opacity 0.1s linear 0.35s;
  position: absolute;
  left: 100%; top: -3px;
  z-index: 10;               /* メニュー本体の他の列より前面に */
  min-width: 13em;
  background: #c0c0c0;
  padding: 2px;
  box-shadow:
    inset -1px -1px 0 #000000,
    inset  1px  1px 0 #ffffff,
    inset -2px -2px 0 #808080,
    inset  2px  2px 0 #dfdfdf;
}
.c95-sm-parent:hover .c95-sm-sub { visibility: visible; opacity: 1; }
/* モバイル：右へ開くと画面端で見切れるため、項目の上側へ開く */
@media (max-width: 640px) {
  .c95-startmenu .c95-sm-sub { left: 0; top: auto; bottom: 100%; }
}
.c95-sm-sub button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  font: inherit; font-size: var(--c95-fs, 16px); color: #000;
  background: transparent; border: 0;
  padding: 0.4em 1.2em 0.4em 0.5em;
  cursor: pointer; text-align: left;
  white-space: nowrap;
}
.c95-sm-sub button:hover { background: #000080; color: #fff; }
.c95-sm-sub img { width: 1.25em; height: 1.25em; image-rendering: pixelated; }
/* ── ミニアプリ（マインスイーパ・メモ帳・ペイント）─────────────
     スタートメニュー→プログラムから起動するWin95風の小窓。
     タイトルバーでドラッグ移動、×で閉じる。 ── */
.c95-app[hidden] { display: none; }
.c95-app {
  position: absolute;
  z-index: 60;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  padding: 2px;
  max-width: calc(100% - 16px);
}
.c95-app .c95-app-title { cursor: move; user-select: none; touch-action: none; }   /* スマホでもドラッグ移動できるように */
.c95-app-ico { width: 1em; height: 1em; flex: 0 0 auto; }   /* タイトルバーのアプリアイコン */
.c95-app-body { padding: 6px; }
.c95-app-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; font-size: 0.9em; }
.c95-app-bar .grow { flex: 1 1 auto; }
/* バーの部品（ボタン・セレクト）は縮ませない・折り返させない（幅固定時の崩壊防止） */
.c95-app-bar .c95-btn,
.c95-app-bar .c95-size { flex: 0 0 auto; white-space: nowrap; }
/* 情報テキストは最低幅だけ確保し、余った分は省略（文言変化で幅が変わらない） */
#msInfo {
  flex: 1 1 5em;
  min-width: 5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#msTime { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* マインスイーパ盤面 */
.c95-ms-grid {
  display: grid;
  grid-template-columns: repeat(9, 1.7em);
  gap: 0;
  width: fit-content;
  margin: 0 auto;
  border: 2px solid;
  border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
  background: #c0c0c0;
}
.c95-ms-cell {
  width: 1.7em; height: 1.7em;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: var(--c95-fs, 16px); font-weight: 700; line-height: 1;
  color: #000;
  background: #c0c0c0;
  border: 0; padding: 0; cursor: pointer;
  box-shadow:
    inset -1px -1px 0 #808080,
    inset  1px  1px 0 #ffffff,
    inset -2px -2px 0 #a0a0a0,
    inset  2px  2px 0 #dfdfdf;
}
.c95-ms-cell.open {
  box-shadow: inset 1px 1px 0 #808080;
  background: #bdbdbd;
  cursor: default;
}
.c95-ms-cell.boom { background: #ff4b3c; }
.c95-ms-cell:not(.open) { color: #c00000; }   /* 旗（▲）の色 */
.c95-ms-cell.n1 { color: #0000d4; }
.c95-ms-cell.n2 { color: #007000; }
.c95-ms-cell.n3 { color: #d40000; }
.c95-ms-cell.n4 { color: #000080; }
.c95-ms-cell.n5 { color: #800000; }
.c95-ms-cell.n6 { color: #008080; }
.c95-ms-cell.n7 { color: #000000; }
.c95-ms-cell.n8 { color: #606060; }
#msFlag.on {
  background: #dfdfdf;
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset  1px  1px 0 #000000,
    inset -2px -2px 0 #dfdfdf,
    inset  2px  2px 0 #808080;
}
/* 中級（16×16）はマスを小さく。
   グリッド列は 1.3em（基準サイズ基準）なので、font-size を 0.75em に落としたマスの
   width/height は 1.3em ÷ 0.75 で列幅と一致させる（そのまま 1.3em だと自分の
   font-size 基準＝実質 0.975em になり、列との間に隙間ができてズレる） */
.c95-ms-grid.ms-big .c95-ms-cell {
  width: calc(1.3em / 0.75);
  height: calc(1.3em / 0.75);
  font-size: 0.75em;
}

/* リバーシ盤面 */
.c95-rv-grid {
  display: grid;
  grid-template-columns: repeat(8, 2.2em);
  width: fit-content;
  margin: 0 auto;
  gap: 1px;
  padding: 1px;
  background: #065f22;
  border: 2px solid;
  border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
}
/* 盤面の上に重ねる先手決めトス演出 */
.rv-board-wrap { position: relative; width: fit-content; margin: 0 auto; }
.rv-toss[hidden] { display: none; }
/* 終局後の「結果を投稿」：盤上中央に大きく表示する */
.rv-postwrap[hidden] { display: none; }
.rv-postwrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;          /* 盤面は透かして見せ、ボタンだけ押せる */
}
.rv-postwrap .rv-post-big {
  pointer-events: auto;
  font-size: 1.25em;
  padding: 0.5em 1.4em;
  border-width: 3px;
}
.rv-toss {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.rv-toss-disc {
  width: 3.5em; height: 3.5em;
  border-radius: 50%;
}
.rv-toss-disc.black { background: radial-gradient(circle at 35% 30%, #555, #000 70%); border: 1px solid #000; }
.rv-toss-disc.white { background: radial-gradient(circle at 35% 30%, #ffffff, #cfcfcf 70%); border: 1px solid #999; }
.rv-toss-msg { color: #fff; font-weight: 700; text-align: center; padding: 0 8px; }

/* 情報行（1行固定・幅は盤面基準。テキスト変化で窓サイズが変わらないようにする） */
.rv-info-bar { min-height: 1.5em; padding-bottom: 4px; }
.rv-info-bar span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c95-rv-cell {
  width: 2.2em; height: 2.2em;
  background: #0a8f33;
  border: 0; padding: 0;
  cursor: pointer;
  position: relative;
}
.c95-rv-cell.b::after,
.c95-rv-cell.w::after,
.c95-rv-cell.hint::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
}
.c95-rv-cell.b::after { background: radial-gradient(circle at 35% 30%, #555, #000 70%); }
.c95-rv-cell.w::after { background: radial-gradient(circle at 35% 30%, #ffffff, #cfcfcf 70%); border: 1px solid #999; }
.c95-rv-cell.hint::after { inset: 38%; background: rgba(255, 255, 90, 0.65); }   /* 置ける場所のヒント */

/* タスクバーの起動中アプリボタン */
.c95-tasks {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin-left: 3px;
}
.c95-apptask { width: 10em; flex: 0 1 auto; }

/* タイピング（ひらがな入力速度） */
.tp-word {
  min-width: 16em;
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: #fff;
  border: 2px solid;
  border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
  padding: 0.5em 0.8em;
  margin-bottom: 6px;
  white-space: nowrap;
}
.tp-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: var(--c95-fs, 16px);
  color: #000;
  background: #fff;
  border: 2px solid;
  border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
  border-radius: 0;
  padding: 6px 8px;
}
.tp-input:disabled { background: #dcdcdc; }
/* 出題のフリガナ（漢字・英字を含む語はルビで読みを表示する） */
.tp-word ruby { ruby-align: center; }
.tp-word rt { font-size: 0.45em; font-weight: 500; letter-spacing: 0.05em; }
.tp-result { min-height: 1.5em; padding-top: 6px; font-size: 0.9em; font-weight: 700; }
#tpTime { font-variant-numeric: tabular-nums; }
/* 開始ボタンはスマホでも押しやすいように大きめにする */
#tpStart, #rdStart { min-width: 7em; min-height: 2.2em; padding: 0.3em 1em; font-weight: 700; }
/* 結果投稿ボタン（終了後にだけ表示） */
#tpPost, #rdPost { margin-top: 6px; padding: 0.3em 1em; }

/* ── 連打大戦（5×5マス） ── */
.rd-grid {
  display: grid;
  grid-template-columns: repeat(5, 2.4em);
  gap: 4px;
  width: fit-content;
  margin: 0 auto 6px;
  touch-action: manipulation;   /* ダブルタップ拡大による連打の取りこぼし防止 */
}
.rd-cell {
  width: 2.4em; height: 2.4em;
  background: #c0c0c0;
  border: 0; padding: 0; cursor: pointer;
  box-shadow:
    inset -1px -1px 0 #808080,
    inset  1px  1px 0 #ffffff,
    inset -2px -2px 0 #a0a0a0,
    inset  2px  2px 0 #dfdfdf;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rd-cell.on {
  background: #ff3b1f;   /* 押すべきマス（光る） */
  box-shadow: inset 1px 1px 0 #7a0000, inset -1px -1px 0 #ff9a8a;
}
/* バーの数値は縮ませない・折り返させない（幅固定時の1文字折れ崩壊防止） */
#rdTime, #rdScore {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* モバイル：ウィンドウを横いっぱいにし、マスも幅に合わせて拡大する */
@media (max-width: 640px) {
  #c95AppRenda { width: calc(100% - 12px) !important; }   /* appLockWidthのインライン幅より優先 */
  .rd-grid {
    grid-template-columns: repeat(5, 1fr);
    width: auto;
    gap: 6px;
    margin: 0 0 6px;
  }
  .rd-cell {
    width: auto;
    height: auto;
    aspect-ratio: 1;   /* 幅に追従した正方形マス */
  }
  #rdStart, #rdRetry { min-height: 2.6em; }
}

/* ── 超義男姉妹達（横スクロール） ── */
.ys-canvas {
  display: block;
  width: 576px;
  max-width: 100%;
  background: #87ceeb;
  border: 2px solid;
  border-color: #7a7a7a #ffffff #ffffff #7a7a7a;   /* 沈み込みパネル（Win95） */
  box-sizing: border-box;
  touch-action: none;           /* キャンバス上のスワイプでページが動かないように */
  image-rendering: pixelated;   /* 拡縮時もレトロにくっきり */
}
/* タッチ操作ボタン（スマホ向け。PCでもキーボードと併用可） */
.ys-pad {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  touch-action: manipulation;
}
.ys-pad-btn {
  font-weight: 700;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ys-pad .grow { flex: 1 1 auto; }   /* ジャンプボタンを右端へ押しやるスペーサー */
/* 左右ボタンは大きめの正方形（押しやすさ優先） */
#ysPadL, #ysPadR {
  width: 52px;
  height: 52px;
  min-width: 52px;
  padding: 0;
  font-size: 1.25em;
}
.ys-pad-jump { height: 52px; min-width: 7.5em; }
#ysTime { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 説明文はキャンバス幅で折り返す（長い1行がウィンドウの自然幅を広げて
   キャンバス右側に謎の余白ができるのを防ぐ） */
#ysResult { max-width: 576px; }
#ysStart { min-width: 7em; min-height: 2.2em; padding: 0.3em 1em; font-weight: 700; }
#ysPost { margin-top: 6px; padding: 0.3em 1em; }
/* モバイル：ウィンドウを横いっぱいに（キャンバスは width:100% で追従） */
@media (max-width: 640px) {
  #c95AppYoshio { width: calc(100% - 12px) !important; }
  .ys-canvas { width: 100%; }
}

/* ── ゲームランキング ── */
/* 選択肢の入れ替えで幅が変わってウィンドウ（開いた時の実測幅で固定）から
   はみ出さないよう、2つのセレクトは固定幅にする */
#rkGame, #rkSub { width: 8.5em; }   /* 「超義男姉妹達」「プロゲーマー」が収まる幅 */
/* ゲームメニューの区切り線（Win95風の凹み線） */
.c95-menu-sep {
  margin: 3px 2px;
  border-top: 1px solid #7a7a7a;
  border-bottom: 1px solid #ffffff;
}
/* 投稿内の「（現在N位）」リンク。
   本文（クリックでゲーム起動）と区別できるよう赤系の別リンク色にする */
.c95-text-rank {
  color: #d40000;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
}
.c95-text-rank:hover { color: #ff2a00; }
/* ランキング一覧（白のくぼみパネル） */
.rk-list {
  min-width: 17em;
  max-height: 20em;
  overflow-y: auto;
  background: #fff;
  border: 2px solid;
  border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
  padding: 4px 8px;
  font-size: 0.9em;
}
.rk-row { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.rk-row.me { background: #ffef9e; }
.rk-rank { flex: 0 0 2.6em; text-align: right; font-weight: 700; }
.rk-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000080;
}
.rk-score { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.rk-foot { margin-top: 4px; border-top: 1px solid #b0b0b0; padding-top: 3px; font-weight: 700; }
/* c95-btn は inline-flex のため hidden 属性が負ける（display が優先される）対策 */
.c95-btn[hidden] { display: none; }

/* ペイント：ツールは描画部の左に縦並び */
.c95-paint-main { display: flex; gap: 6px; align-items: flex-start; }
.c95-paint-side { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.c95-paint-side .c95-btn { width: 6.5em; font-size: 0.85em; font-weight: 400; }

/* ペイントのツールボタン押下状態（へこみ表示） */
.c95-paint-side .pt-tool.on,
.c95-paint-tools .pt-tool.on {
  background: #dfdfdf;
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset  1px  1px 0 #000000,
    inset -2px -2px 0 #dfdfdf,
    inset  2px  2px 0 #808080;
}

/* メモ帳 */
.c95-notepad {
  display: block;
  width: min(32em, 78vw);
  height: 18em;
  resize: both;
  font: inherit; font-size: var(--c95-fs, 16px); color: #000;
  background: #fff;
  border: 2px solid;
  border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
  border-radius: 0;
  padding: 6px 8px;
  line-height: 1.5;
}
.c95-notepad:focus { outline: none; }

/* ペイント */
.c95-paint-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; }
.c95-paint-colors { display: flex; flex-wrap: wrap; gap: 2px; max-width: 19em; }
.pt-color {
  width: 1em; height: 1em; padding: 0; cursor: pointer;
  border: 2px solid; border-color: #ffffff #000000 #000000 #ffffff;
}
.pt-color.on { border-color: #000000 #ffffff #ffffff #000000; outline: 1px solid #000080; }
#ptEraser.on {
  background: #dfdfdf;
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset  1px  1px 0 #000000,
    inset -2px -2px 0 #dfdfdf,
    inset  2px  2px 0 #808080;
}
#ptCanvas {
  display: block;
  background: #fff;
  border: 2px solid;
  border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
  /* 基本は実寸420pxでウィンドウ幅に寄与し、入り切らない画面でだけ縮小表示する
     （内部解像度は420×300のまま。ポインタ座標はJS側でスケール換算済み） */
  width: 420px;
  min-width: 0;
  max-width: 100%;
  height: auto;
  touch-action: none;   /* 指描画中のスクロールを防ぐ */
  cursor: crosshair;
}

/* ── ブルースクリーン（使えないメニュー項目の演出。実機の例外画面を再現） ── */
.c95-bsod[hidden] { display: none; }
.c95-bsod {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #0000aa;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
  cursor: default;
  user-select: none;
}
.c95-bsod-inner {
  max-width: 46em;
  font-size: var(--c95-fs, 16px);
  line-height: 1.8;
}
.c95-bsod-title { text-align: center; margin: 0 0 1.4em; }
.c95-bsod-title span {
  background: #aaaaaa;
  color: #0000aa;
  font-weight: 700;
  padding: 0 0.7em;
}
.c95-bsod-inner p { margin: 0; }
.c95-bsod-key { text-align: center; margin-top: 1.6em !important; }
.c95-bsod-cursor { animation: c95blink 1s steps(1) infinite; }
@keyframes c95blink { 50% { opacity: 0; } }

/* メニューを開いている間、スタートボタンはへこんだまま（Win95の挙動） */
.c95-start.on {
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset  1px  1px 0 #000000,
    inset -2px -2px 0 #dfdfdf,
    inset  2px  2px 0 #808080;
}
/* 右端のトレイ（へこみ枠＋時計） */
.c95-tray {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex; align-items: center;
  height: 1.75em;
  padding: 0 0.6em;
  font-size: var(--c95-fs, 16px);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

/* □ボタンでの全画面表示（ヘッダーごと覆う。もう一度押すと戻る） */
.chat-desk.c95-max {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 0;
}
.chat-desk.c95-max .c95-win { max-width: none; }

/* ── 窓全体 ─────────────────────────────────────────── */
.c95-win {
  width: 100%;
  /* ヘッダーの中身（ロゴ〜右端）の実表示幅と揃える：
     .hd-inner は max-width:1200px の内側に左右 padding 28px を持つため、中身は 1144px */
  max-width: 1144px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #c0c0c0;
  color: #000;
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  padding: 2px;
  /* 当時のMSゴシック12pxビットマップ再現フォント（PixelMplus12）。
     12pxで表示するとドットが正確に揃う。CDN不達時は DotGothic16 → MSゴシック系で代替 */
  font-family: "PixelMplus12", "DotGothic16", "MS Gothic", "ＭＳ ゴシック", "MS UI Gothic",
               "MS PGothic", "ＭＳ Ｐゴシック", "Osaka－等幅", "Osaka-Mono", "IPAゴシック",
               "IPAGothic", "Noto Sans Mono CJK JP", monospace;
  font-size: var(--c95-fs, 16px);   /* 画面内の文字はすべて16pxで統一 */
  letter-spacing: 0;
}
.c95-win * { letter-spacing: 0; }

/* ── タイトルバー（Win95 は単色の紺） ─────────────────── */
.c95-title {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #000080;
  color: #fff;
  font-weight: 700;
  font-size: var(--c95-fs, 16px);
  padding: 2px 3px 2px 6px;   /* 当時のタイトルバーは薄い */
  user-select: none;
}
.c95-title-ico { flex: 0 0 auto; width: 16px; height: 16px; image-rendering: pixelated; }
.c95-title-text { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* ボタンは3つとも均等2px間隔（密着させるとベベルの継ぎ目が影のように見えるため） */
.c95-title-btns { display: flex; gap: 2px; flex: 0 0 auto; }
/* 右上の _ □ × ：文字グリフだと縦位置がフォント依存でズレるため、SVGアイコンを背景描画する。
   大きさはタイトルバーの高さ（16px文字）に合わせる */
.c95-title-btns span,
.c95-title-btns button,
.c95-title-btns a {
  font: inherit;   /* button は既定でフォントを継承しないため明示（em基準を3要素で揃える） */
  width: 1.25em; height: 1.0625em;   /* 文字サイズに追従（16px時 20×17pxちょうど。端数だと縁が滲む） */
  display: inline-block;
  background-color: #c0c0c0;
  /* 本物のWin95と同じ2段ベベル（外周：白/黒、内側：薄グレー/濃グレー） */
  border: 0;
  box-shadow:
    inset -1px -1px 0 #000000,
    inset  1px  1px 0 #ffffff,
    inset -2px -2px 0 #808080,
    inset  2px  2px 0 #dfdfdf;
  text-decoration: none; cursor: pointer; padding: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.56em 0.56em;
}
.c95-title-btns span { cursor: default; }
/* 押下時：ベベルを反転（へこみ） */
.c95-title-btns button:active,
.c95-title-btns a:active {
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset  1px  1px 0 #000000,
    inset -2px -2px 0 #dfdfdf,
    inset  2px  2px 0 #808080;
}
.c95-tb-min {
  /* 最小化：下辺の横バー */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Crect x='1' y='6' width='5' height='2' fill='%23000'/%3E%3C/svg%3E");
}
.c95-tb-max {
  /* 最大化：上辺が太い四角 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0 H8 V8 H0 Z M1 2 V7 H7 V2 Z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
}
/* 最大化中は「元に戻す」アイコン（窓2枚の重なり）に変わる（Win95の挙動） */
.chat-desk.c95-max .c95-tb-max {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Crect x='2' y='0' width='6' height='1.6' fill='%23000'/%3E%3Crect x='6.9' y='1.6' width='1.1' height='3.4' fill='%23000'/%3E%3Cpath d='M0 2.5 H6 V8 H0 Z M1 4 V7 H5 V4 Z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.c95-tb-close {
  /* 閉じる：× */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1 L7 7 M7 1 L1 7' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* ── メニューバー ────────────────────────────────────── */
.c95-menu { display: flex; gap: 0; padding: 1px; border-bottom: 1.5px solid #7a7a7a; }
.c95-menu button,
.c95-menu a {
  font: inherit; font-size: var(--c95-fs, 16px); color: #000; text-decoration: none;
  background: transparent; border: 1.5px solid transparent;
  padding: 0 7px; cursor: pointer;
}
.c95-menu button:hover,
.c95-menu a:hover { border-color: #ffffff #000000 #000000 #ffffff; }
.c95-menu button:active { border-color: #000000 #ffffff #ffffff #000000; }

/* ── 使い方（Win95風ポップアップダイアログ） ─────────────── */
.c95-dlg-back[hidden] { display: none; }   /* display:flex が hidden 属性に勝ってしまうのを防ぐ */
.c95-dlg-back {
  position: fixed;
  inset: 0;
  z-index: 10001;                 /* 全画面表示(10000)より上 */
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.c95-dlg {
  width: min(460px, 100%);
  background: #c0c0c0;
  color: #000;
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  padding: 2px;
}
.c95-dlg-body {
  padding: 10px 12px;
  font-size: var(--c95-fs, 16px);
  line-height: 1.8;
}
.c95-dlg-body b { color: #000080; }
.c95-dlg-btnrow { display: flex; justify-content: center; padding: 2px 0 8px; }
.c95-dlg-ok { min-width: 84px; }

/* ── 中央部（ログ＋入室者一覧の2ペイン。残り高さいっぱいに広がる） ── */
.c95-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 3px;
  margin: 3px 3px 0;
}

/* ── ログ列（タブ＋ログ）とWin95風タブ ─────────────────── */
.c95-logcol {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.c95-logcol .c95-log { flex: 1 1 auto; }
/* タブはログと接続しない独立ボタン式（Macのセグメント風）。少し間隔を空ける */
.c95-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  padding: 0 0 4px;
}
/* Win95：普通の立体ボタン。選択中は「へこみ」で表現 */
.c95-tab {
  font: inherit;
  font-size: 0.8em;
  color: #000;
  background: #c0c0c0;
  border: 0;
  padding: 3px 14px;
  margin-right: 3px;
  cursor: pointer;
  box-shadow:
    inset -1px -1px 0 #808080,
    inset  1px  1px 0 #ffffff,
    inset -2px -2px 0 #a0a0a0,
    inset  2px  2px 0 #dfdfdf;
}
.c95-tab.on {
  font-weight: 700;
  background: #b0b0b0;
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset  1px  1px 0 #000000,
    inset -2px -2px 0 #dfdfdf,
    inset  2px  2px 0 #808080;
}
/* ── タブのスキン再現 ── */
/* XP：ボタン風（Lunaのグラデーション）。選択中はへこみ色 */
.theme-xp .c95-tab {
  background: linear-gradient(#ffffff, #ecebe5 86%, #d8d0c4);
  border: 1px solid #003c74;
  border-radius: 3px;
  box-shadow: none;
}
.theme-xp .c95-tab.on {
  background: linear-gradient(#d8d0c4, #ecebe5);
  font-weight: 700;
}
/* Vista：Aero風ボタン。選択中は青いガラス */
.theme-vista .c95-tab {
  background: linear-gradient(#f5f6f7, #e4e6e9 45%, #ced3d9 50%, #dfe3e8);
  border: 1px solid #8e9aa5;
  border-radius: 3px;
  box-shadow: none;
}
.theme-vista .c95-tab.on {
  background: linear-gradient(#cbe6f8, #a9d9f2 50%, #8fccec 51%, #a9d9f2);
  border-color: #3c7fb1;
  font-weight: 700;
}
/* Mac：セグメンテッドコントロール（結合された丸ボタン・選択中は青） */
.theme-mac .c95-tabs { padding: 0 0 8px; }
.theme-mac .c95-tab {
  background: #f6f6f8;
  border: 1px solid #d6d6db;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 3px 14px;
}
.theme-mac .c95-tab + .c95-tab { border-left: none; }
.theme-mac .c95-tab:first-child { border-radius: 6px 0 0 6px; }
.theme-mac .c95-tab:last-child { border-radius: 0 6px 6px 0; }
.theme-mac .c95-tab.on {
  background: #007aff;
  color: #fff;
}
/* タブによる絞り込み：チャット＝入退室・ゲーム結果を隠す／ゲーム＝ゲーム結果のみ */
.c95-log[data-tab="chat"] .c95-line-sys,
.c95-log[data-tab="chat"] .c95-line-game { display: none; }
.c95-log[data-tab="game"] .c95-line:not(.c95-line-game) { display: none; }
/* 「入退室を隠す」チェック中：入室・退室のシステム行を隠す（全タブ共通） */
.c95-log[data-hidesys="1"] .c95-line-sys { display: none; }
/* チェックボックス本体（タブ行の右端） */
.c95-syschk {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8em;
  color: #000;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.c95-syschk input { margin: 0; cursor: pointer; }
.theme-mac .c95-syschk { color: #333; }
/* 該当行なしの案内（絞り込みの影響を受けない専用クラス） */
.c95-tab-empty { color: #7a7a7a; }

/* ── ログ表示部（白い沈み込みパネル） ───────────────────── */
.c95-log {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: scroll;
  background: #fff;
  border: 2px solid;
  border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
  padding: 3px 5px;
  font-size: var(--c95-fs, 16px);                    /* 発言の標準サイズ（chatSizes の 2=標準 と一致させる） */
  line-height: 1.35;                  /* 当時の詰まった行間 */
  overflow-wrap: anywhere;
  scrollbar-color: #c0c0c0 #dcdcdc;   /* Firefox 用（レトロなグレー） */
}
/* レトロ風スクロールバー（WebKit系）。Win95 らしく上下の矢印ボタン付き */
.c95-log::-webkit-scrollbar,
.c95-members-list::-webkit-scrollbar { width: 16px; }
.c95-log::-webkit-scrollbar-track,
.c95-members-list::-webkit-scrollbar-track { background: #dcdcdc; border-left: 1px solid #7a7a7a; }
.c95-log::-webkit-scrollbar-thumb,
.c95-members-list::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
}
.c95-log::-webkit-scrollbar-button:single-button,
.c95-members-list::-webkit-scrollbar-button:single-button {
  display: block;
  width: 16px; height: 16px;
  background-color: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7px 7px;
}
.c95-log::-webkit-scrollbar-button:single-button:vertical:decrement,
.c95-members-list::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 1 L7 6 L1 6 Z' fill='%23000'/%3E%3C/svg%3E");
}
.c95-log::-webkit-scrollbar-button:single-button:vertical:increment,
.c95-members-list::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 7 L1 2 L7 2 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ── 入室者一覧（右側の欄。名前はプロフィールへのリンク） ────── */
.c95-members {
  flex: 0 0 225px;   /* 150px の1.5倍 */
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border: 2px solid;
  border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
}
.c95-members-h {
  flex: 0 0 auto;
  background: #c0c0c0;
  border-bottom: 1.5px solid #7a7a7a;
  padding: 2px 6px;
  font-size: var(--c95-fs, 16px);
  font-weight: 700;
}
.c95-members-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 3px 6px;
  font-size: var(--c95-fs, 16px);
  line-height: 1.6;
  scrollbar-color: #c0c0c0 #dcdcdc;
}
.c95-member {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  text-decoration: none;
  margin: 1px 0;
}
.c95-member:hover .c95-member-name { text-decoration: underline; }
/* アイコン（16px角・レトロに直角）。アバター無しは人型シルエットの既定アイコン */
.c95-member-ava {
  flex: 0 0 auto;
  align-self: center;
  width: 1.3em; height: 1.3em;   /* 文字サイズに追従（16px時 約21px）。名前とほぼ同じ高さに */
  border: 1px solid #7a7a7a;
  background-color: #dcdcdc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;   /* 縮小アバターをドット調に */
}
.c95-member-ava.default {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23808080'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2.5c-4.2 0-8 2.1-8 5V21h16v-1.5c0-2.9-3.8-5-8-5z'/%3E%3C/svg%3E");
  background-size: 12px 12px;
}
.c95-member-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 「さらに読み込む」（ログ最上部。古い発言を10件ずつ遡る） */
.c95-more { text-align: center; padding: 2px 0 5px; }
.c95-more[hidden] { display: none; }
.c95-more .c95-btn { font-weight: 400; }

/* ログ内はすべて基準サイズ（16px）で統一する（時刻・システム行も縮小しない） */
.c95-line { margin: 0; }
.c95-line-sys { color: #7a7a7a; }
.c95-time { color: #9a9a9a; margin-right: 4px; font-variant-numeric: tabular-nums; }
.c95-time-del { cursor: pointer; }   /* クリックで削除できる発言の日付 */
.c95-name { font-weight: 700; margin-right: 5px; white-space: nowrap; text-decoration: none; }
.c95-name:hover { text-decoration: underline; }
.c95-name::after { content: ">"; margin-left: 2px; color: #7a7a7a; font-weight: 400; }
.c95-text { white-space: pre-wrap; }
/* 複数行の本文：名前の行ではなく、その下の行から（少しインデントして）表示 */
.c95-text-block { display: block; margin: 1px 0 2px 16px; }
/* リバーシの対局結果（クリックでリバーシ起動） */
.c95-text-rv { cursor: pointer; color: #000080; text-decoration: underline; font-weight: 700; }
.c95-text-rv:hover { color: #0000c0; }
.c95-imgwrap { display: block; margin: 3px 0 2px 16px; line-height: 0; }
.c95-imgwrap.c95-imgwrap-rv img { max-width: min(200px, 100%); }   /* リバーシ結果の盤面画像は200px上限 */
.c95-imgwrap img {
  /* 表示は400×400の正方形に制限し、その中に縦横比を保って縮小する
     （縦長画像が幅400のまま縦にだけ巨大化するのを防ぐ） */
  max-width: min(400px, 100%);
  max-height: 400px;
  width: auto;
  height: auto;
  border: 1px solid #000;
  background: #fff;
  padding: 1px;
  cursor: zoom-in;
  image-rendering: pixelated;   /* 拡縮時にドットを残す（当時のペイント感） */
}

/* ── 書式ツールバー ──────────────────────────────────── */
.c95-tools {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 3px 3px 1px;
}
.c95-btn {
  font: inherit; font-size: var(--c95-fs, 16px); font-weight: 700; color: #000;
  /* 寸法はem＝文字サイズ連動（16px時 約28×26px）。基準サイズ変更でボタンごと拡大縮小する */
  min-width: 1.75em; height: 1.65em;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;   /* フォントメトリクス由来の文字の下寄りズレを防ぎ、確実に中央へ */
  background: #c0c0c0;
  border: 2px solid; border-color: #ffffff #000000 #000000 #ffffff;
  cursor: pointer; padding: 0 0.4em;
}
.c95-btn:active,
.c95-btn.on { border-color: #000000 #ffffff #ffffff #000000; background: #b0b0b0; }
.c95-btn-b { font-weight: 900; }
.c95-btn-i { font-style: italic; font-family: serif; }
.c95-btn-u { text-decoration: underline; }
.c95-sep { width: 2px; height: 1.4em; border-left: 1px solid #7a7a7a; border-right: 1px solid #ffffff; }
/* サイズ選択：ブラウザ標準の見た目を消し、白フィールド＋グレーのベベル風▼ボタンを自前で描く */
.c95-size {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font: inherit; font-size: var(--c95-fs, 16px); height: 1.65em;
  padding: 0 1.4em 0 0.25em;
  color: #000;
  background-color: #fff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 7 L1 2 L7 2 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#c0c0c0, #c0c0c0);
  background-repeat: no-repeat, no-repeat;
  background-position: right 0.3em center, right 2px center;
  background-size: 0.45em 0.45em, 0.9em calc(100% - 4px);
  border: 2px solid; border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
  border-radius: 0;
}
/* 文字色パレット（16色スウォッチ） */
.c95-colors { display: flex; flex-wrap: wrap; gap: 2px; }
.c95-swatch {
  width: 0.9em; height: 0.9em; padding: 0; cursor: pointer;
  border: 2px solid; border-color: #ffffff #000000 #000000 #ffffff;
}
.c95-swatch.on { border-color: #000000 #ffffff #ffffff #000000; outline: 1px solid #000080; }

/* ── 入力エリア ─────────────────────────────────────── */
.c95-inputrow { display: flex; gap: 3px; align-items: stretch; padding: 3px 3px 1px; }
.c95-input {
  flex: 1 1 auto; min-width: 0; resize: none;
  font-family: inherit; font-size: var(--c95-fs, 16px); line-height: 1.35; color: #000;
  background: #fff;
  border: 2px solid; border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
  border-radius: 0;
  padding: 2px 5px;
}
.c95-send {
  flex: 0 0 auto; min-width: 4.75em;
  font: inherit; font-size: var(--c95-fs, 16px); font-weight: 700; color: #000;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  background: #c0c0c0;
  border: 2px solid; border-color: #ffffff #000000 #000000 #ffffff;
  cursor: pointer;
}
.c95-send:active { border-color: #000000 #ffffff #ffffff #000000; }
.c95-send:disabled { color: #7a7a7a; cursor: default; }

/* 添付行（ファイル名・プレビュー・取消） */
.c95-attachrow[hidden] { display: none; }   /* display:flex が hidden 属性に勝ってしまうのを防ぐ */
.c95-attachrow { display: flex; align-items: center; gap: 6px; padding: 2px 3px 3px; font-size: var(--c95-fs, 16px); }
.c95-attachname { color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 40%; }
.c95-attachrow img { height: 30px; width: auto; border: 1px solid #7a7a7a; background: #fff; }

/* 未ログイン案内 */
.c95-loginbox {
  margin: 4px 3px; padding: 8px 10px;
  background: #ffffe1; border: 1px solid #000;
  font-size: var(--c95-fs, 16px);
}
.c95-loginbox a { color: #000080; font-weight: 700; }

/* ── ステータスバー ──────────────────────────────────── */
.c95-status { display: flex; gap: 2px; padding: 2px 1px 0; font-size: var(--c95-fs, 16px); }
.c95-status span {
  border: 2px solid; border-color: #7a7a7a #ffffff #ffffff #7a7a7a;
  padding: 0 6px; background: #c0c0c0; color: #222;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.c95-status .grow { flex: 1 1 auto; }
.c95-status .warn { color: #800000; font-weight: 700; }
/* 文字数カウンタ：未入力（空）のときは空箱を出さない */
#c95Count:empty { display: none; }
/* 時計（Win95タスクバー風）。数字の桁ブレを防ぐ */
#c95Clock { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
/* 右下角のリサイズグリップ（斜線の掴み）。枠・背景の共通指定を打ち消して斜線だけ描く */
.c95-status .c95-grip {
  flex: 0 0 auto;
  width: 15px;
  align-self: stretch;
  border: 0;
  padding: 0;
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 3px, #ffffff 3px 4.5px, #7a7a7a 4.5px 6px);
  background-color: transparent;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ── モバイル ───────────────────────────────────────── */
@media (max-width: 640px) {
  /* 左右はヘッダー余白(14px)と揃える。下は常時表示タスクバーぶんを確保 */
  .chat-desk { padding: 6px 14px calc(var(--c95-fs, 16px) * 1.75 + 14px); }
  .c95-members { display: none; }         /* 画面幅が足りないため入室者欄は出さない */
  .c95-attachname { max-width: 30%; }
  /* 狭い端末でタブ＋「入退室を隠す」が収まらないときは折り返す */
  .c95-tabs { flex-wrap: wrap; row-gap: 3px; }
}

/* ============================================================
   スキン切替（メニュー「スキン(S)」）
     .theme-95（既定・上記の素のスタイル）に対し、
     .theme-xp / .theme-vista / .theme-mac が上書きする。
     95風以外は各OSの見た目再現のため、角丸・影・グラデーションを意図的に使う
     （サイトのデザイン標準の例外。チャット窓の中だけで完結）。
   ============================================================ */

/* メニュー内ドロップダウン（Win95のメニュー風） */
.c95-menu-wrap { position: relative; display: inline-block; }
.c95-menu-pop {
  position: absolute; left: 0; top: 100%; z-index: 100;
  min-width: 190px;
  background: #c0c0c0;
  border: 2px solid; border-color: #ffffff #000000 #000000 #ffffff;
  padding: 2px;
}
.c95-menu-pop button {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: var(--c95-fs, 16px); color: #000;
  background: transparent; border: 0; cursor: pointer;
  padding: 2px 12px 2px 26px; position: relative;
}
.c95-menu-pop button:hover { background: #000080; color: #fff; }
.c95-menu-pop button.on::before { content: '✓'; position: absolute; left: 7px; }

/* ── 共通：95風以外はドット描画をやめて通常レンダリングに戻す ── */
.chat-desk:is(.theme-xp, .theme-vista, .theme-mac) .c95-imgwrap img,
.chat-desk:is(.theme-xp, .theme-vista, .theme-mac) .c95-member-ava,
.chat-desk:is(.theme-xp, .theme-vista, .theme-mac) .c95-title-ico {
  image-rendering: auto;
}
/* リサイズグリップ（斜線の掴み）は Win95 専用の飾り。他スキンでは隙間に見えるため出さない */
.chat-desk:is(.theme-xp, .theme-vista, .theme-mac) .c95-status .c95-grip { display: none; }

/* ============ Windows XP風（Luna・青いグラデーション） ============ */
.theme-xp .c95-win {
  font-family: Tahoma, 'Meiryo UI', Meiryo, 'Yu Gothic UI', sans-serif;
  background: #ece9d8;
  border: 2px solid #0831d9;
  border-radius: 8px 8px 0 0;
}
.theme-xp .c95-title {
  background: linear-gradient(#2a80eb 0%, #0955dd 8%, #0947c8 40%, #0955dd 88%, #063fb2 100%);
  border-radius: 6px 6px 0 0;
  padding: 4px 5px 4px 7px;
  text-shadow: 1px 1px 1px #0f1089;
}
.theme-xp .c95-title-btns span,
.theme-xp .c95-title-btns button,
.theme-xp .c95-title-btns a {
  width: 21px; height: 21px;
  border: 1px solid #fff;
  border-radius: 3px;
  background-color: transparent;
  background-image: linear-gradient(#7ba9e8, #2a68c9);
  background-size: auto, auto;
}
.theme-xp .c95-tb-min {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Crect x='1' y='6' width='5' height='2' fill='%23fff'/%3E%3C/svg%3E"), linear-gradient(#7ba9e8, #2a68c9);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 8px 8px, cover;
}
.theme-xp .c95-tb-max {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0 H8 V8 H0 Z M1 2 V7 H7 V2 Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E"), linear-gradient(#7ba9e8, #2a68c9);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 8px 8px, cover;
}
.theme-xp .c95-tb-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1 L7 7 M7 1 L1 7' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"), linear-gradient(#e8927b, #d0442a);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 8px 8px, cover;
}
.theme-xp .c95-menu { background: #ece9d8; border-bottom: 1px solid #aca899; }
.theme-xp .c95-log,
.theme-xp .c95-members,
.theme-xp .c95-input {
  border: 1px solid #7f9db9;
  border-radius: 0;
}
.theme-xp .c95-members-h { background: #ece9d8; border-bottom: 1px solid #aca899; }
.theme-xp .c95-btn,
.theme-xp .c95-send,
.theme-xp .c95-size {
  background: linear-gradient(#ffffff, #ecebe5 86%, #d8d0c4);
  border: 1px solid #003c74;
  border-radius: 3px;
}
.theme-xp .c95-btn.on { background: linear-gradient(#d8d0c4, #ecebe5); }
.theme-xp .c95-status span { border: 1px solid #aca899; background: #ece9d8; }
.theme-xp .c95-dlg { background: #ece9d8; border: 2px solid #0831d9; border-radius: 8px 8px 0 0; }
.theme-xp .c95-menu-pop { background: #fff; border: 1px solid #aca899; }
.theme-xp .c95-menu-pop button:hover { background: #316ac5; }

/* ============ Windows Vista風（Aero・黒ガラス） ============ */
.theme-vista .c95-win {
  font-family: 'Segoe UI', Meiryo, 'Yu Gothic UI', sans-serif;
  background: #f0f0f0;
  border: 2px solid #38505f;
  border-radius: 7px 7px 0 0;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}
.theme-vista .c95-title {
  background: linear-gradient(rgba(120, 140, 160, 0.95) 0%, rgba(60, 78, 96, 0.95) 48%, rgba(28, 42, 56, 0.97) 52%, rgba(52, 70, 88, 0.95) 100%);
  border-radius: 5px 5px 0 0;
  padding: 4px 5px 4px 7px;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
.theme-vista .c95-title-btns span,
.theme-vista .c95-title-btns button,
.theme-vista .c95-title-btns a {
  width: 26px; height: 17px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  background-color: transparent;
  background-image: linear-gradient(rgba(255,255,255,0.35), rgba(40,55,70,0.6) 50%, rgba(10,20,30,0.7));
}
.theme-vista .c95-tb-min {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Crect x='1' y='6' width='5' height='2' fill='%23fff'/%3E%3C/svg%3E"), linear-gradient(rgba(255,255,255,0.35), rgba(40,55,70,0.6) 50%, rgba(10,20,30,0.7));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 8px 8px, cover;
}
.theme-vista .c95-tb-max {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0 H8 V8 H0 Z M1 2 V7 H7 V2 Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E"), linear-gradient(rgba(255,255,255,0.35), rgba(40,55,70,0.6) 50%, rgba(10,20,30,0.7));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 8px 8px, cover;
}
.theme-vista .c95-tb-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1 L7 7 M7 1 L1 7' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"), linear-gradient(#e8927b, #b8291a 55%, #7e150a);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 8px 8px, cover;
}
.theme-vista .c95-menu { background: #f0f0f0; border-bottom: 1px solid #d5d5d5; }
.theme-vista .c95-log,
.theme-vista .c95-members,
.theme-vista .c95-input {
  border: 1px solid #8e9aa5;
  border-radius: 2px;
}
.theme-vista .c95-members-h { background: linear-gradient(#fcfcfd, #e6ecf2); border-bottom: 1px solid #c5d1dc; }
.theme-vista .c95-btn,
.theme-vista .c95-send,
.theme-vista .c95-size {
  background: linear-gradient(#f5f6f7, #e4e6e9 45%, #ced3d9 50%, #dfe3e8);
  border: 1px solid #8e9aa5;
  border-radius: 3px;
}
.theme-vista .c95-btn.on { background: linear-gradient(#c2e4f6, #a9d9f2); border-color: #3c7fb1; }
.theme-vista .c95-status span { border: 1px solid #d5d5d5; background: #f0f0f0; }
.theme-vista .c95-dlg { background: #f0f0f0; border: 2px solid #38505f; border-radius: 7px 7px 0 0; box-shadow: 0 6px 22px rgba(0,0,0,0.55); }
.theme-vista .c95-menu-pop { background: #f0f0f0; border: 1px solid #979797; }
.theme-vista .c95-menu-pop button:hover { background: #d9eaf9; color: #000; }

/* ============ Mac風（信号機ボタン・左上） ============ */
.theme-mac .c95-win {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
  background: #f6f6f6;
  border: 1px solid #c5c5c5;
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3);
  padding: 0;
}
.theme-mac .c95-title {
  background: linear-gradient(#ececec, #d9d9d9);
  color: #3a3a3a;
  font-weight: 600;
  border-radius: 10px 10px 0 0;
  padding: 6px 10px;
  text-shadow: none;
}
/* 信号機ボタンを左端へ（＿□×の並びを 閉/最小/最大 の丸に置き換え） */
.theme-mac .c95-title-btns { order: -2; gap: 7px; }
.theme-mac .c95-title-btns .c95-tb-close { margin-left: 0; }   /* Macは信号機の等間隔 */
.theme-mac .c95-title-ico { order: -1; }
.theme-mac .c95-title-text { text-align: center; }
.theme-mac .c95-title-btns span,
.theme-mac .c95-title-btns button,
.theme-mac .c95-title-btns a {
  width: 0.85em; height: 0.85em;
  border-radius: 50%;
  background-image: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: none;   /* 95ベースの2段ベベルを打ち消す */
}
.theme-mac .c95-tb-min   { background-color: #febc2e; order: 2; }
.theme-mac .c95-tb-max   { background-color: #28c840; order: 3; }
.theme-mac .c95-tb-close { background-color: #ff5f57; order: 1; }
.theme-mac .c95-menu { background: #f6f6f6; border-bottom: 1px solid #dcdcdc; }
.theme-mac .c95-log,
.theme-mac .c95-members,
.theme-mac .c95-input {
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
}
.theme-mac .c95-members-h { background: #f0f0f0; border-bottom: 1px solid #e0e0e0; border-radius: 6px 6px 0 0; }
.theme-mac .c95-btn,
.theme-mac .c95-size {
  background: linear-gradient(#ffffff, #f1f1f1);
  border: 1px solid #c9c9c9;
  border-radius: 6px;
}
.theme-mac .c95-btn.on { background: #007aff; border-color: #007aff; color: #fff; }
.theme-mac .c95-send {
  background: #007aff;
  border: 1px solid #007aff;
  border-radius: 6px;
  color: #fff;
}
.theme-mac .c95-send:disabled { background: #9cc5f5; border-color: #9cc5f5; color: #f0f0f0; }
.theme-mac .c95-status span { border: 1px solid #dcdcdc; background: #f6f6f6; border-radius: 5px; }
.theme-mac .c95-dlg { background: #f6f6f6; border: 1px solid #c5c5c5; border-radius: 10px; box-shadow: 0 10px 32px rgba(0,0,0,0.3); }
.theme-mac .c95-menu-pop { background: #ffffff; border: 1px solid #d6d6d6; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.16); }
.theme-mac .c95-menu-pop button { border-radius: 5px; }
.theme-mac .c95-menu-pop button:hover { background: #007aff; color: #fff; }

/* ============================================================
   スキン再現度向上パッチ（後勝ちで上書き）
     ・XP/Vista：タイトルボタンのアイコン復活（グラデ指定がアイコンを潰していた）
       ＋ガラス感・Luna感の作り込み
     ・11/Mac：見た目だけでなく配置・余白も今風に（カード化・角丸・ゆとり）
   ============================================================ */

/* ---------- Windows XP（Luna）作り込み ---------- */
.theme-xp .c95-win {
  border: 3px solid #0855dd;
  border-top: 0;
  padding: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.theme-xp .c95-title {
  font-family: 'Trebuchet MS', Tahoma, 'Meiryo UI', sans-serif;
  background: linear-gradient(#5da2f5 0%, #2b71e4 5%, #1c50c8 12%, #2560d6 22%, #1c50c8 85%, #123679 100%);
  padding: 5px 5px 5px 8px;
}
.theme-xp .c95-title-btns { gap: 2px; }   /* XPは3つとも等間隔 */
.theme-xp .c95-title-btns .c95-tb-close { margin-left: 0; }
.theme-xp .c95-title-btns span,
.theme-xp .c95-title-btns button,
.theme-xp .c95-title-btns a {
  width: 1.4em; height: 1.4em;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: none;   /* 95ベースの2段ベベルを打ち消す */
}
.theme-xp .c95-title-btns .c95-tb-min {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Crect x='1' y='6' width='5' height='2' fill='%23fff'/%3E%3C/svg%3E") center / 0.56em 0.56em no-repeat,
              radial-gradient(circle at 30% 25%, #9cc4f8, #3a76e0 60%, #1f50b0);
}
.theme-xp .c95-title-btns .c95-tb-max {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0 H8 V8 H0 Z M1 2 V7 H7 V2 Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E") center / 0.56em 0.56em no-repeat,
              radial-gradient(circle at 30% 25%, #9cc4f8, #3a76e0 60%, #1f50b0);
}
.theme-xp .c95-title-btns .c95-tb-close {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1 L7 7 M7 1 L1 7' stroke='%23fff' stroke-width='1.7'/%3E%3C/svg%3E") center / 0.56em 0.56em no-repeat,
              radial-gradient(circle at 30% 25%, #f2a48c, #dd4f2e 60%, #b03015);
}
/* XP：最大化中は「元に戻す」（窓2枚・白） */
.theme-xp.c95-max .c95-title-btns .c95-tb-max {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Crect x='2' y='0' width='6' height='1.6' fill='%23fff'/%3E%3Crect x='6.9' y='1.6' width='1.1' height='3.4' fill='%23fff'/%3E%3Cpath d='M0 2.5 H6 V8 H0 Z M1 4 V7 H5 V4 Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E") center / 0.56em 0.56em no-repeat,
              radial-gradient(circle at 30% 25%, #9cc4f8, #3a76e0 60%, #1f50b0);
}

/* ---------- Windows Vista（Aero）作り込み ---------- */
.theme-vista .c95-title {
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15) 48%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(#8fa8bd, #5d7891 50%, #33506b 51%, #49657e);
}
.theme-vista .c95-title-btns { gap: 1px; }
.theme-vista .c95-title-btns .c95-tb-min {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Crect x='1' y='6' width='5' height='2' fill='%23fff'/%3E%3C/svg%3E") center / 8px 8px no-repeat,
              linear-gradient(rgba(255,255,255,0.4), rgba(70,90,110,0.55) 50%, rgba(15,25,38,0.75));
}
.theme-vista .c95-title-btns .c95-tb-max {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0 H8 V8 H0 Z M1 2 V7 H7 V2 Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E") center / 8px 8px no-repeat,
              linear-gradient(rgba(255,255,255,0.4), rgba(70,90,110,0.55) 50%, rgba(15,25,38,0.75));
}
.theme-vista .c95-title-btns .c95-tb-close {
  width: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1 L7 7 M7 1 L1 7' stroke='%23fff' stroke-width='1.7'/%3E%3C/svg%3E") center / 8px 8px no-repeat,
              linear-gradient(#f0a08c 0%, #d4482b 45%, #9c2210 55%, #c23a1e 100%);
}

/* ---------- Mac：今風の配置（信号機・カード化・ピル型ボタン） ---------- */
.theme-mac .c95-win { padding: 0 10px 10px; background: #f5f5f7; }
.theme-mac .c95-title {
  background: transparent;
  border-bottom: 1px solid #e4e4e8;
  margin: 0 -10px 6px;
  padding: 11px 14px;
}
.theme-mac .c95-title-ico { display: none; }   /* Macのタイトルバーにアプリアイコンは出さない */
.theme-mac .c95-title-btns span,
.theme-mac .c95-title-btns button,
.theme-mac .c95-title-btns a { border: 1px solid rgba(0, 0, 0, 0.12); }
.theme-mac .c95-menu { background: transparent; border: 0; padding: 0 0 8px; gap: 6px; }
.theme-mac .c95-menu button,
.theme-mac .c95-menu a { border-radius: 7px; padding: 3px 12px; border: 0; }
.theme-mac .c95-menu button:hover, .theme-mac .c95-menu a:hover { background: #e8e8ed; }
.theme-mac .c95-main { margin: 0 0 10px; gap: 10px; }
.theme-mac .c95-log { border: 1px solid #e4e4e8; border-radius: 10px; padding: 10px 14px; }
.theme-mac .c95-members { border: 1px solid #e4e4e8; border-radius: 10px; overflow: hidden; }
.theme-mac .c95-members-h { background: #fafafa; border-bottom: 1px solid #efeff2; padding: 6px 10px; }
.theme-mac .c95-members-list { padding: 6px 10px; }
.theme-mac .c95-tools { padding: 0 0 8px; gap: 6px; }
.theme-mac .c95-btn { height: 1.9em; min-width: 2em; border-radius: 7px; }
.theme-mac .c95-size { height: 1.9em; border-radius: 7px; }
.theme-mac .c95-attachrow { padding: 0 0 8px; }
.theme-mac .c95-inputrow { padding: 0; gap: 8px; }
.theme-mac .c95-input { border-radius: 12px; border: 1px solid #d9d9de; padding: 8px 14px; }
.theme-mac .c95-input:focus { border-color: #007aff; outline: 3px solid rgba(0, 122, 255, 0.3); outline-offset: -1px; }
.theme-mac .c95-send { border-radius: 10px; padding: 0 20px; }
.theme-mac .c95-status { padding: 8px 2px 0; }
.theme-mac .c95-status span { border: 0; background: transparent; color: #8e8e93; border-radius: 0; }
.theme-mac .c95-log::-webkit-scrollbar,
.theme-mac .c95-members-list::-webkit-scrollbar { width: 10px; }
.theme-mac .c95-log::-webkit-scrollbar-track,
.theme-mac .c95-members-list::-webkit-scrollbar-track { background: transparent; border: 0; }
.theme-mac .c95-log::-webkit-scrollbar-thumb,
.theme-mac .c95-members-list::-webkit-scrollbar-thumb { background: #cfcfd4; border: 2px solid transparent; background-clip: padding-box; border-radius: 8px; }
.theme-mac .c95-log::-webkit-scrollbar-button:single-button,
.theme-mac .c95-members-list::-webkit-scrollbar-button:single-button { display: none; }

/* ============================================================
   スキン仕上げパッチ2（Mac磨き込み・Vista作り直し）
   ============================================================ */

/* ---------- Mac：ツールバー・パレット・発言ボタンをmacOS流に ---------- */
.theme-mac .c95-title {
  background: linear-gradient(#fbfbfd, #f1f1f4);
  border-bottom: 1px solid #e0e0e4;
  padding: 12px 14px;
}
.theme-mac .c95-sep { border: 0; width: 1px; height: 20px; background: #dcdce0; }
.theme-mac .c95-btn {
  border: 1px solid #d6d6db;
  background: #f6f6f8;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.theme-mac .c95-btn:active { background: #e7e7ea; border-color: #c9c9ce; }
.theme-mac .c95-btn.on { background: #007aff; border-color: #007aff; box-shadow: none; }
.theme-mac .c95-size {
  border: 1px solid #d6d6db;
  background-color: #f6f6f8;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 6 L1.5 3 L6.5 3 Z' fill='%23707076'/%3E%3C/svg%3E"),
    none;
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px 8px;
}
.theme-mac .c95-colors { gap: 4px; }
.theme-mac .c95-swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.theme-mac .c95-swatch.on { outline: 2px solid #007aff; outline-offset: 1px; border-color: #fff; }
.theme-mac .c95-inputrow { align-items: flex-end; }
.theme-mac .c95-send { height: 2.5em; border-radius: 1.25em; padding: 0 1.4em; }
.theme-mac .c95-members-h { font-weight: 600; }
.theme-mac .c95-dlg-ok { background: #007aff; color: #fff; border: 0; border-radius: 8px; height: 32px; padding: 0 24px; }
.theme-mac .c95-dlg-btnrow { padding: 4px 0 12px; }

/* ---------- Vista：Aeroガラスの作り直し ---------- */
/* 窓全体：厚い半透明ガラス枠（左右下7px）＋外周の濃線＋内側の白線 */
.theme-vista .c95-win {
  border: 7px solid rgba(150, 170, 188, 0.9);
  border-top: 0;
  border-radius: 8px 8px 0 0;
  padding: 0;
  background: #f0f0f0;
  box-shadow:
    0 0 0 1px #2b3f52,
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 8px 28px rgba(0, 0, 0, 0.5);
}
/* タイトルバー：青みのガラス＋上半分の強いハイライト。文字は黒＋白グロー（Aero流） */
.theme-vista .c95-title {
  margin: 0 -7px;   /* 左右のガラス枠と一体化させる */
  padding: 6px 8px 7px 10px;
  border-radius: 7px 7px 0 0;
  color: #000;
  text-shadow: 0 0 12px #fff, 0 0 5px #fff, 0 0 2px #fff;
  background:
    linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) 42%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.15)),
    linear-gradient(#b6c8d6, #93aabc 50%, #7391a7 51%, #86a0b4);
}
/* ボタン群：上端に張り付き、下だけ角丸（Vistaの実機と同じ）。閉じるは横長の赤 */
.theme-vista .c95-title-btns { align-self: flex-start; margin-top: -6px; gap: 0; }
.theme-vista .c95-title-btns .c95-tb-close { margin-left: 0; }   /* Vistaは3つ密着 */
.theme-vista .c95-title-btns span,
.theme-vista .c95-title-btns button,
.theme-vista .c95-title-btns a {
  width: 1.8em; height: 1.2em;
  border: 1px solid rgba(25, 45, 65, 0.75);
  border-top: 0;
  border-radius: 0;
  box-shadow: none;   /* 95ベースの2段ベベルを打ち消す */
}
.theme-vista .c95-title-btns .c95-tb-min {
  border-radius: 0 0 0 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Crect x='1' y='5.4' width='5' height='1.6' fill='%23223547'/%3E%3C/svg%3E") center / 0.5em 0.5em no-repeat,
              linear-gradient(rgba(255,255,255,0.85), rgba(205,220,232,0.7) 45%, rgba(140,165,185,0.65) 50%, rgba(175,195,210,0.7));
}
.theme-vista .c95-title-btns .c95-tb-max {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0.8 0.8 H7.2 V7.2 H0.8 Z M1.8 2.6 V6.2 H6.2 V2.6 Z' fill='%23223547' fill-rule='evenodd'/%3E%3C/svg%3E") center / 0.5em 0.5em no-repeat,
              linear-gradient(rgba(255,255,255,0.85), rgba(205,220,232,0.7) 45%, rgba(140,165,185,0.65) 50%, rgba(175,195,210,0.7));
}
.theme-vista .c95-title-btns .c95-tb-close {
  width: 2.8em;
  border-radius: 0 0 5px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.3 1.3 L6.7 6.7 M6.7 1.3 L1.3 6.7' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") center / 0.5em 0.5em no-repeat,
              linear-gradient(#f5b09e 0%, #e06848 40%, #c03318 50%, #d8542f 90%, #f0906e 100%);
}
/* ミニアプリ窓のタイトルはみ出し補正：
   上の margin: 0 -7px（Vista）/ 0 -10px（Mac）は本体窓のガラス/カード枠
   （パディング7px/10px）と一体化させるための指定。ミニアプリ窓（.c95-app）の
   パディングは2pxしかないため、そのままだとタイトルバーが窓からはみ出す */
/* テーマ時（95以外）はミニアプリ窓の上角を丸め、タイトルバーを窓の上端まで
   広げて overflow:hidden で角をそろえる（グレーの四角い角が覗くのを防ぐ） */
.theme-xp .c95-app {
  border: 2px solid #0831d9;
  border-radius: 8px 8px 0 0;
  background: #ece9d8;
  overflow: hidden;
}
.theme-vista .c95-app {
  border: 2px solid #38505f;
  border-radius: 7px 7px 0 0;
  background: #f0f0f0;
  overflow: hidden;
}
.theme-mac .c95-app {
  border: 1px solid #c9c9cc;
  border-radius: 10px;
  background: #f5f5f7;
  overflow: hidden;
}
.theme-xp    .c95-app .c95-title,
.theme-vista .c95-app .c95-title { margin: -2px -2px 0; border-radius: 0; }
.theme-mac   .c95-app .c95-title { margin: -2px -2px 6px; border-radius: 0; }

/* Vista：最大化中は「元に戻す」（窓2枚・紺） */
.theme-vista.c95-max .c95-title-btns .c95-tb-max {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Crect x='2' y='0' width='6' height='1.6' fill='%23223547'/%3E%3Crect x='6.9' y='1.6' width='1.1' height='3.4' fill='%23223547'/%3E%3Cpath d='M0 2.5 H6 V8 H0 Z M1 4 V7 H5 V4 Z' fill='%23223547' fill-rule='evenodd'/%3E%3C/svg%3E") center / 0.5em 0.5em no-repeat,
              linear-gradient(rgba(255,255,255,0.85), rgba(205,220,232,0.7) 45%, rgba(140,165,185,0.65) 50%, rgba(175,195,210,0.7));
}
/* クライアント領域：Aero Basicの淡いグレー。ボタン類は柔らかいグラデ */
.theme-vista .c95-menu { background: #f0f0f0; border-bottom: 1px solid #dcdcdc; }
.theme-vista .c95-btn,
.theme-vista .c95-send,
.theme-vista .c95-size {
  background: linear-gradient(#f8f9fa, #eef1f3 45%, #dde3e8 50%, #eaeef1);
  border: 1px solid #9daab5;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.theme-vista .c95-btn.on {
  background: linear-gradient(#cbe6f8, #a9d9f2 50%, #8fccec 51%, #a9d9f2);
  border-color: #3c7fb1;
}
.theme-vista .c95-status { padding: 3px 1px 1px; }
.theme-vista .c95-status span { border: 1px solid #d5d5d5; background: linear-gradient(#fdfdfd, #eef1f3); }

/* ============================================================
   タスクバー／スタートメニューのスキン別再現
     95＝グレー（上の基本スタイル）／XP＝青バー＋緑スタート／
     Vista＝黒ガラス＋丸オーブ／Mac＝Dock（スタート・トレイなし）
   ============================================================ */

/* ---------- XP：Luna（青いタスクバー・緑のスタート） ---------- */
.theme-xp .c95-taskbar {
  background: linear-gradient(#3f8cf3 0%, #245edb 8%, #1941a5 90%, #1d47b0 100%);
  border-top: 1px solid #0831d9;
  padding: 3px 4px;
}
.theme-xp .c95-tb-div { display: none; }
.theme-xp .c95-start {
  background: linear-gradient(#7bc77b 0%, #379e37 45%, #2b842b 55%, #4cae4c 100%);
  color: #fff;
  font-style: italic;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  border-radius: 0 9px 9px 0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
  margin-right: 8px;
}
.theme-xp .c95-start.on,
.theme-xp .c95-start:active { filter: brightness(0.85); box-shadow: none; }
.theme-xp .c95-task {
  background: linear-gradient(#4e91f5, #2b63cf 50%, #2258bd);
  color: #fff;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.theme-xp .c95-task:active { background: #1e4cb0; box-shadow: none; }
.theme-xp .c95-task.on { background: #1e4cb0; font-weight: 700; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.theme-xp .c95-tray {
  background: linear-gradient(#1290e9, #0b53c4);
  color: #fff;
  box-shadow: none;
  border-left: 1px solid #0831d9;
}
.theme-xp .c95-startmenu {
  background: #fff;
  padding: 0;
  border: 1px solid #0831d9;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.45);
  /* overflow:hidden は禁止（プログラムのサブメニューが右外に出るためクリップされて消える） */
  border-radius: 6px 6px 0 0;
}
.theme-xp .c95-sm-band { border-radius: 6px 0 0 0; }   /* 角丸は帯側に付けて代用 */
.theme-xp .c95-sm-band {
  background: linear-gradient(#2a80eb, #1c50c8);
  color: #fff;
}
.theme-xp .c95-sm-band b { color: #ffe14d; }
.theme-xp .c95-sm-item:hover,
.theme-xp .c95-sm-sub button:hover { background: #316ac5; color: #fff; }
.theme-xp .c95-sm-sub { background: #fff; border: 1px solid #aca899; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.35); }
/* XPのメニューは2列構成のため、右に開くと右列と重なる → 項目の上側へ開く */
.theme-xp .c95-sm-xp .c95-sm-sub { left: 0; top: auto; bottom: 100%; }
.theme-xp .c95-sm-sep { border-top: 1px solid #d5dce5; border-bottom: 0; }

/* ---------- Vista：Aero（黒ガラスのタスクバー・丸いスタートオーブ） ---------- */
.theme-vista .c95-taskbar {
  background: linear-gradient(rgba(130, 145, 160, 0.9), rgba(35, 48, 62, 0.95) 50%, rgba(10, 18, 28, 0.96));
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  padding: 3px 6px;
}
.theme-vista .c95-tb-div { display: none; }
.theme-vista .c95-start {
  width: 2.1em; height: 2.1em;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9cc4f8, #2456b0 60%, #12305e);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7);
  margin-right: 8px;
}
.theme-vista .c95-start span { display: none; }   /* オーブはアイコンのみ */
.theme-vista .c95-start.on,
.theme-vista .c95-start:active { filter: brightness(1.25); }
.theme-vista .c95-task {
  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08) 50%, rgba(0, 0, 0, 0.25));
  color: #fff;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.theme-vista .c95-task:active { background: rgba(0, 0, 0, 0.35); }
.theme-vista .c95-task.on { background: rgba(255, 255, 255, 0.4); font-weight: 700; }
.theme-vista .c95-tray {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}
.theme-vista .c95-startmenu {
  background: rgba(28, 38, 50, 0.97);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.theme-vista .c95-sm-band { display: none; }
.theme-vista .c95-sm-item { color: #fff; border-radius: 3px; }
.theme-vista .c95-sm-item:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
/* Vistaも2列構成のため上側へ開く。背景は完全不透明（下の文字が透けないように） */
.theme-vista .c95-sm-sub { background: #1c2632; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); }
.theme-vista .c95-sm-vista .c95-sm-sub { left: 0; top: auto; bottom: 100%; }
.theme-vista .c95-sm-sub button { color: #fff; border-radius: 3px; }
.theme-vista .c95-sm-sub button:hover { background: rgba(255, 255, 255, 0.18); }
.theme-vista .c95-sm-sep { border-top: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 0; }

/* ---------- スタートメニュー／ブルースクリーンのスキン別出し分け ---------- */
.c95-sm-95 { display: flex; }
.c95-sm-xp, .c95-sm-vista { display: none; }
.theme-xp .c95-sm-95 { display: none; }
.theme-xp .c95-sm-xp { display: block; }
.theme-vista .c95-sm-95 { display: none; }
.theme-vista .c95-sm-vista { display: block; }
.c95-bs-xp, .c95-bs-vista { display: none; }
.theme-xp .c95-bs-95 { display: none; }
.theme-xp .c95-bs-xp { display: block; }
.theme-vista .c95-bs-95 { display: none; }
.theme-vista .c95-bs-vista { display: block; }
/* NT系（XP/Vista）のブルスクは左寄せ・ヘッダーなし */
.c95-bs-nt { text-align: left; max-width: 50em; }

/* ---------- XPスタートメニュー（Luna：青ヘッダー＋白/水色2列＋ログオフ帯） ---------- */
.theme-xp .c95-startmenu { min-width: 0; }
.c95-xp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px;
  background: linear-gradient(#2a80eb, #1c50c8);
  color: #fff; font-weight: 700; font-size: 1.05em;
  border-radius: 6px 6px 0 0;
}
.c95-xp-ava {
  width: 2.4em; height: 2.4em;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px; background: #fff; object-fit: cover;
}
.c95-xp-cols { display: flex; align-items: stretch; }
.c95-xp-left { background: #fff; min-width: 14em; display: flex; flex-direction: column; padding: 6px 2px; }
.c95-xp-right { background: #d3e5fa; border-left: 1px solid #95bdee; min-width: 14em; padding: 6px 2px; color: #1e3c78; }
.c95-xp-sep { border: 0; border-top: 1px solid #d9d9d9; margin: 3px 8px; }
.c95-xp-sep2 { border: 0; border-top: 1px solid #a8c6e8; margin: 3px 8px; }
.c95-xp-fill { flex: 1 1 auto; min-height: 1.5em; }
.c95-xp-chat {
  display: flex; align-items: center; gap: 8px;
  font: inherit; font-size: var(--c95-fs, 16px); font-weight: 700; color: #000;
  background: transparent; border: 0;
  padding: 0.4em 0.8em 0.4em 0.5em;
  cursor: pointer; text-align: left; white-space: nowrap;
}
.c95-xp-chat img { width: 1.6em; height: 1.6em; }
.theme-xp .c95-xp-chat:hover { background: #316ac5; color: #fff; }
.c95-xp-all { font-weight: 700; }
.c95-xp-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(#2a80eb, #1c50c8);
  color: #fff;
  border-radius: 0;
}
.c95-xp-foot .c95-sm-item { padding: 0.2em 0.5em; color: #fff; }
.theme-xp .c95-xp-foot .c95-sm-item:hover { background: rgba(255, 255, 255, 0.25); color: #fff; }
.c95-xp-foot img { width: 1.3em; height: 1.3em; }

/* ---------- Vistaスタートメニュー（白い左列＋黒ガラス右列＋検索・電源） ---------- */
.theme-vista .c95-startmenu { min-width: 0; }
.c95-vs-cols { display: flex; align-items: stretch; }
.c95-vs-left {
  background: rgba(250, 250, 252, 0.97);
  min-width: 14em;
  display: flex; flex-direction: column;
  padding: 6px 2px;
  border-radius: 4px 0 0 4px;
}
.theme-vista .c95-vs-left .c95-sm-item { color: #1a1a1a; }
.theme-vista .c95-vs-left .c95-sm-item:hover { background: #d9eaf9; color: #000; }
.theme-vista .c95-vs-left .c95-xp-chat { color: #1a1a1a; }
.theme-vista .c95-vs-left .c95-xp-chat:hover { background: #d9eaf9; }
.c95-vs-search {
  margin: 6px 8px 4px;
  padding: 0.35em 1em;
  background: #fff;
  border: 1px solid #9db8d2;
  border-radius: 12px;
  color: #8a929c;
  font-size: 0.9em;
}
.c95-vs-right { min-width: 12em; padding: 10px 4px 8px; display: flex; flex-direction: column; }
.c95-vs-ava {
  width: 3.4em; height: 3.4em;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px; background: #fff; object-fit: cover;
  align-self: center; margin-bottom: 6px;
}
.c95-vs-sep { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); margin: 4px 8px; }
.c95-vs-power { margin-top: auto; display: flex; gap: 6px; justify-content: flex-end; padding: 8px 8px 2px; }
.c95-vs-pw { padding: 0.25em !important; border-radius: 4px; }
.c95-vs-pw img { width: 1.6em; height: 1.6em; }

/* ---------- Mac：Dock（スタート・トレイなし。中央の半透明トレー） ---------- */
/* MacのDockは常時表示しない：最小化中（.is-min）のみ出す。下余白も不要 */
.chat-desk.theme-mac { padding-bottom: 18px; }
.theme-mac .c95-taskbar { display: none; }
.theme-mac.is-min .c95-taskbar { display: flex; }
.theme-mac .c95-start,
.theme-mac .c95-tb-div,
.theme-mac .c95-tray { display: none; }
.theme-mac .c95-startmenu { display: none; }
.theme-mac .c95-taskbar {
  left: 50%; right: auto; bottom: 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
}
.theme-mac .c95-task {
  width: auto; max-width: none;
  height: auto;
  flex-direction: column; gap: 3px;
  padding: 2px 6px;
  background: transparent;
  box-shadow: none;
}
.theme-mac .c95-task:active { box-shadow: none; filter: brightness(0.85); }
.theme-mac .c95-task img { width: 2.8em; height: 2.8em; image-rendering: auto; border-radius: 9px; }
.theme-mac .c95-task span { font-size: 0.7em; color: #1d1d1f; }

/* 全画面（c95-max）中はタスクバーを絶対に出さない（スキン・状態を問わず最優先。
   チャット画面との重なり防止） */
.chat-desk.c95-max .c95-taskbar { display: none !important; }