@charset "UTF-8";

/* 基本スタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0 auto;
  padding: 0;
  background-color: #f4f4f4;
  width: 95%;
}

/* チャットボックス */
#chat-box {
  max-height: 400px; /* 最大の高さを設定 */
  min-height: 350px; /* 最小の高さを設定 */
  overflow-y: auto; /* 縦スクロールを可能に */
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

/* 名前入力欄とメッセージ入力欄 */
input[type="text"], #color-input {
  padding: 8px;
  margin: 5px 0;
  width: 95%; /* 幅を95%に */
}

/* 名前入力欄のスタイル */
#name-input {
  flex: 0 0 150px; /* 固定幅を指定 */
}

/* 色選択欄のスタイル */
#color-input {
  width: auto; /* 幅は自動 */
  margin-left: 10px; /* 左側に10pxのマージンを追加 */
}

/* 名前入力欄と色選択欄のコンテナ */
.name-color-container {
  display: flex; /* Flexboxを使用 */
  align-items: center; /* 垂直方向のセンタリング */
  margin-bottom: 10px; /* 下のマージンを追加 */
}


/* ボタン */
#send-button {
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* ボタンにホバーエフェクト */
#send-button:hover {
  background-color: #0056b3;
}

.migi {
  text-align: right;
}

.btn {
  text-align: right;
}

.modo {
  display: block;
  text-align: left;
}

/* メディアクエリ */
@media (max-width: 600px) {
  #chat-box {
      max-height: 300px; /* スマホでは高さを小さく */
  }

  /* 名前入力欄のスタイル */
  #name-input {
      width: 150px; /* 名前入力欄の幅を150pxに設定 */
  }

  /* ボタンのスタイル */
  #send-button {
      font-size: 1.2em; /* フォントサイズを大きく */
  }
}