/* Base reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Container full width */
.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
}

/* Chat header */
.container h2 {
  background: #000;
  color: #fff;
  padding: 12px;
  font-size: 1.5em;
  text-align: center;
  border-bottom: 1px solid #333;
}
.subinfo {
  font-size: 0.9em;
  color: #ccc;
  text-align: center;
  padding: 4px 0;
  border-bottom: 1px solid #333;
}

/* Chat window with LINE-style bubbles */
#chat-window {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background: #2a2a2a;
  display: flex;
  flex-direction: column;
}

/* Message bubbles */
.message {
  display: inline-block;
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 18px;
  max-width: 75%;
  word-wrap: break-word;
  line-height: 1.4;
  position: relative;
}

/* Self message: green bubble on right */
.message.self {
  background: #dcf8c6;
  align-self: flex-end;
  margin-left: auto;
  color: #000;
  border-bottom-right-radius: 2px;
}

/* Other message: white bubble on left */
.message.other {
  background: #fff;
  align-self: flex-start;
  margin-right: auto;
  color: #000;
  border-bottom-left-radius: 2px;
}

/* Images in messages */
.message img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: pointer;
  display: block;
}

/* Input area */
#input-area {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #111;
  border-top: 1px solid #333;
}

/* Username label */
#user_name {
  margin-right: 8px;
  font-weight: bold;
  white-space: nowrap;
  color: #fff;
}

/* Text area */
#text_msg {
  flex: 1;
  resize: none;
  border: 1px solid #555;
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  height: 40px;
  background: #222;
  color: #fff;
  outline: none;
  margin-right: 8px;
}

/* File input and send button */
#image_file {
  margin-right: 8px;
}
#send_text {
  background: #128c7e;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}
#send_text:hover {
  background: #075e54;
}

/* Mobile layout adjustments */
@media (max-width: 480px) {
  #input-area {
    flex-direction: column;
  }
  #user_name, #text_msg {
    width: 100%;
    margin-bottom: 8px;
  }
  #send_text, #image_file {
    width: 48%;
    display: inline-block;
    margin: 4px 1%;
  }
}

/* ── 入室ページ用スタイル ── */
body.join-page {
  background: #000;
  color: #fff;
}

.join-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
}

.join-header {
  background: #000;
  color: #fff;
  padding: 12px;
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 16px;
  border-bottom: 1px solid #333;
}

.join-form {
  background: #111;
  padding: 16px;
  border-radius: 8px;
}

.join-form .form-group {
  margin-bottom: 12px;
}

.join-form label {
  display: block;
  font-size: 1em;
  margin-bottom: 4px;
}

.join-form input[type="text"] {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background: #222;
  color: #fff;
  font-size: 1em;
}

.btn-submit {
  width: 100%;
  padding: 12px;
  background: #128c7e;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
}

.btn-submit:hover {
  background: #075e54;
}

/* チャット画像の操作禁止 */
.chat-img, /* サムネイル */
.chat-img + img /* ライトボックス内 img */ {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

/* ── チャットルーム上部のコントロールボタン群 ── */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.controls button,
.controls select {
  /* 押しやすく、でもコンパクトに */
  padding: 4px 8px;
  font-size: 0.85rem;
  line-height: 1.2;
  border: 1px solid #444;
  border-radius: 4px;
  background: #222;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.controls button:hover,
.controls select:hover {
  background: #333;
  border-color: #555;
}

.controls button:active {
  background: #111;
  border-color: #666;
}

/* select の見た目調整 */
.controls select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%204%205'%3E%3Cpath%20fill%3D'%23fff'%20d%3D'M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px 10px;
  padding-right: 24px; /* 矢印用スペース確保 */
}

/* ── 通知（入退室メッセージ） ── */
.notice {
  align-self: center;
  background: transparent;
  color: #ccc;
  font-size: 0.8em;
  margin: 6px 0;
  opacity: 0.8;
}