/* リセット */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* メッセージホバー時の削除ボタン */
.message-wrapper {
  position: relative;
}

.message-wrapper:hover .delete-button {
  opacity: 1;
}

.delete-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 10;
}

.delete-button:hover {
  background: rgba(220, 38, 38, 1);
}

.delete-button-left {
  left: 5px;
}

.delete-button-right {
  right: 5px;
}

/* スクロールバーのカスタマイズ */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.google-develop {
  color: red;
  font-weight: bold;
}

/* 親要素：ここを基準にする */
.emoji-container {
  position: relative;
  /* 子要素の基準点になる */
  display: inline-block;
}

/* 絵文字一覧パネル */
.emoji-picker {
  position: absolute;
  bottom: 100%;
  /* ボタンの「上」に配置 */
  left: 50%;
  /* 一旦、左端を中央に持ってくる */
  transform: translateX(-50%);
  /* 自身の幅の半分だけ左に戻して「真ん中」にする */

  margin-bottom: 10px;
  /* ボタンとの隙間 */
  z-index: 1000;
  /* 他の要素より上に表示 */

  /* 見た目の調整 */
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
  /* 最初は隠しておく */
  width: 250px;
  /* 任意の幅 */
  max-height: 300px;
  overflow-y: auto;
}

/* 表示時のクラス（JSで切り替え） */
.emoji-picker.show {
  display: block;
}

/* 音量調整バー */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
  outline: none;
  margin: 10px 0;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  border: 2px solid rgba(34, 197, 94, 0.3);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.3);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: 2px solid rgba(34, 197, 94, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.3);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

input[type="range"]::-moz-range-thumb:active {
  transform: scale(1.1);
}

/* 設定ボタン */
.settings-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
  font-size: 20px;
}

.settings-button:hover {
  transform: rotate(90deg);
  background-color: rgba(255, 255, 255, 0.15);
}

.settings-button:active {
  transform: rotate(90deg) scale(0.95);
}

/* チェックボックス */
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: white;
  border-radius: 4px;
  flex-shrink: 0;
}

input[type="checkbox"]:hover {
  transform: scale(1.1);
  transition: transform 0.2s;
}

/* 音量ラベル */
.volume-label {
  font-size: 14px;
  color: white;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.volume-percentage {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

/* 通知設定セクション */
.notification-section {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

/* アニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    position: absolute;
    z-index: 20;
  }

  .sidebar.hidden {
    transform: translateX(-100%);
  }
}

/* ================================
   ▼ 追加カスタムデザイン & アニメーション
================================ */

/* ① サイドバーをふわっと表示 */
.sidebar-animate {
  animation: slideFade 0.6s ease-out;
}

@keyframes slideFade {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ② 設定ボタン（⚙）をホバーで光らせて回転 */
.settings-button-animated {
  transition: 0.4s ease;
}

.settings-button-animated:hover {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

/* ③ ボタンに共通の"押した感"アニメーション */
.button-press:active {
  transform: scale(0.92);
  transition: transform 0.05s;
}

/* ④ 送信ボタンの光るエフェクト */
.send-glow {
  transition: 0.3s;
}

.send-glow:hover {
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.7);
}

/* ⑤ メッセージが左から右へ優しくスライド */
.message-appear-left {
  animation: msgLeft 0.25s ease-out;
}

@keyframes msgLeft {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ⑥ メッセージが右から登場 */
.message-appear-right {
  animation: msgRight 0.25s ease-out;
}

@keyframes msgRight {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ⑦ アプリ全体に柔らかい背景グラデーション */
.app-bg {
  background: linear-gradient(135deg, #4ade80 0%, #3b82f6 100%);
}

/* ⑧ プロフィールアイコンを"ふわっ"と浮かせる */
.profile-float:hover {
  transform: translateY(-3px) scale(1.05);
  transition: 0.25s ease;
}

/* ⑨ グループアイコンを少し発光 */
.group-icon:hover {
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
  transform: scale(1.07);
  transition: 0.25s ease;
}

.name-change {
  color: #000000;
}

.warning-box {
  max-width: 450px;
  margin: 0 auto;
  border: 2px solid #f06060;
  border-radius: 5px;
  color: #333333;
  margin: 20px 0px;
}

.warning-box div {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  position: relative;
  top: -13px;
  left: 10px;
  margin: 0 7px;
  padding: 0 8px;
  background: #fff;
  color: #f06060;
  font-weight: 600;
  vertical-align: top;
}

.warning-box div::before {
  width: 22px;
  height: 22px;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.warning-box p {
  margin: 0;
  padding: 0 1.5em 1em;
}

.change-username {
  color: black;
}

.warning-box div {
  font-size: 15px;
}

.groupclose {
  margin-top: 10px;
}

/* URLリンクのスタイル */
.message-link {
  color: inherit;
  text-decoration: underline;
  word-break: break-all;
  transition: opacity 0.2s;
}

.message-link:hover {
  opacity: 0.8;
}

/* 自分のメッセージ内のリンク（緑背景） */
.bg-green-500 .message-link {
  color: white;
}

.bg-green-500 .message-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* 相手のメッセージ内のリンク（白背景） */
.bg-white .message-link {
  color: #3b82f6;
}

.bg-white .message-link:hover {
  color: #2563eb;
}

/* 取り消しメッセージのスタイル */
.deleted-message-container {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border: 1px dashed #d1d5db;
  animation: fadeIn 0.3s ease-out;
}

.deleted-message-text {
  color: #6b7280;
  font-size: 0.875rem;
  font-style: italic;
}

.grecaptcha-badge { 
    top: 76px !important; 
}


/* メッセージコンテナの横幅制限を追加 */
.messages-container {
  max-width: 100%;
  overflow-x: hidden; /* 横スクロールを防止 */
  overflow-y: auto;
  padding: 0 16px;
}

/* メッセージバブルの改善 */
.message-bubble {
  max-width: 65%; /* 70%から65%に変更してより適切に */
  width: fit-content;
  word-wrap: break-word;
  word-break: break-word; /* 長いURLなども強制改行 */
  overflow-wrap: break-word;
  padding: 8px 12px;
  border-radius: 12px;
  margin-bottom: 4px;
}

/* スクロールバーを完全に非表示にする */
.custom-scrollbar::-webkit-scrollbar {
  width: 0px; /* 8px から 0px に変更 */
  display: none; /* 完全に非表示 */
}

.custom-scrollbar {
  -ms-overflow-style: none;  /* IE, Edge用 */
  scrollbar-width: none;  /* Firefox用 */
}

/* メッセージエリア全体の幅調整 */
.chat-area {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* 画像メッセージも幅制限 */
.message-image {
  max-width: 300px; /* 画像の最大幅を制限 */
  height: auto;
  border-radius: 8px;
}