/* ============================================================
   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; }
body {
  height: 100vh;    /* dvh 未対応ブラウザ用フォールバック（無効だと高さ制限が消えて溢れる） */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body > .hd { flex: 0 0 auto; }
body > footer.ft { display: none; }

.chat-desk {
  --c95-fs: 16px;        /* 画面全体の基準文字サイズ（メニュー「文字サイズ(Z)」でJSが上書き） */
  background: #008080;   /* Windows95 デスクトップのティール単色 */
  padding: 14px 28px 18px;   /* 左右28px＝ヘッダー内側（.hd-inner）の余白と揃える */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* □ボタンでの全画面表示（ヘッダーごと覆う。もう一度押すと戻る） */
.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");
}
.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;
}

/* ── ログ表示部（白い沈み込みパネル） ───────────────────── */
.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-imgwrap { display: block; margin: 3px 0 2px 16px; line-height: 0; }
.c95-imgwrap img {
  max-width: min(400px, 100%);
  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) {
  .chat-desk { padding: 6px 14px 8px; }   /* モバイルのヘッダー余白(14px)と揃える */
  .c95-members { display: none; }         /* 画面幅が足りないため入室者欄は出さない */
  .c95-attachname { max-width: 30%; }
}

/* ============================================================
   スキン切替（メニュー「スキン(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);
}

/* ---------- 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%);
}
/* クライアント領域：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); }