body {
  margin: 0;
  padding: 0;
  background-color: #111;
  font-family: "Microsoft JhengHei", sans-serif;
  color: #fff;
}

/* ✅ 電腦版時強制隱藏手機用滑出面板 */
@media screen and (min-width: 481px) {
  #mobileMemberPanel {
    display: none !important;
  }
}

.kick-button {
  background-color: crimson;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
}


/* ===== 換房確認彈窗（美化版） ===== */
.custom-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #111;
  color: gold;
  padding: 22px 28px;
  border: 2px solid gold;
  border-radius: 12px;
  z-index: 9999;
  font-size: 16px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  animation: fadeInPop 0.25s ease;
}

/* ✅ 確認文字區塊 */
.custom-confirm div:first-child {
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ===== 按鈕樣式 ===== */
.custom-confirm button {
  margin: 12px 6px 0;
  padding: 7px 16px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s ease;
}

/* ✅ 確定按鈕：金底黑字 */
.custom-confirm .btn-ok {
  background-color: gold;
  color: #111;
}

/* ✅ 取消按鈕：黑底金邊 */
.custom-confirm .btn-cancel {
  background-color: #222;
  color: gold;
  border: 1px solid gold;
}

/* ✅ 滑過效果 */
.custom-confirm button:hover {
  transform: scale(1.06);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* ✅ 按下效果 */
.custom-confirm button:active {
  transform: scale(0.95);
  box-shadow: none;
}

/* ✅ 簡單的進場動畫 */
@keyframes fadeInPop {
  from {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}








.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 左側總欄 */
.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #222;
}

/* 右側成員欄 */
.right-panel {
  width: 240px;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.member-title {
  font-size: 16px;
  color: #ffc800;
  margin-bottom: 10px;
}

.member-list {
  flex: 1;
  overflow-y: auto;
}

/* 上區塊 */
.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  border-bottom: 1px solid #333;
  background-color: #000;
}

.title {
  font-size: 18px;
  color: #ffc800;
  font-weight: bold;
}

/* 顯示目前聊天室房間名稱 */
#currentRoomLabel {
  color: #00aaff;
  margin-left: 6px;
  font-weight: normal;
  font-size: 16px;
}

select {
  padding: 5px 10px;
  background-color: #000;
  color: #ffc800;
  border: 1px solid #ffc800;
}

/* 中區塊 */
.chat-box {
  flex: 1;
  background-color: #000;
  border: 2px solid #ffc800;
  box-shadow: 0 0 12px #ffc800;
  margin: 10px;
  padding: 10px;
  overflow-y: auto;
}


/* ✅ 點擊名稱樣式 */
.clickable-name {
  color: #ffcc00;              /* 黃色字 */
  font-weight: bold;           /* 加粗 */
  cursor: pointer;             /* 滑鼠移過去變成小手 */
  text-decoration: underline;  /* 底線提示可以點 */
}

.clickable-name:hover {
  color: #ffff66;              /* 滑過時更亮的黃 */
  text-shadow: 0 0 5px #ff0;   /* 滑過時加亮光暈 */
}


/* ========= 💬 黑金彈窗樣式 ========= */
.custom-alert {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  color: gold;
  border: 2px solid gold;
  padding: 16px 24px;
  font-size: 18px;
  border-radius: 12px;
  z-index: 9999;
  box-shadow: 0 0 12px gold;
  animation: fadein 0.3s ease;
  max-width: 80%;
  text-align: center;
}

/* 簡單淡入動畫 */
@keyframes fadein {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}




/* === 通用訊息框的行距壓縮 === */
.chat-area p {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
}

/* === 系統訊息（進出聊天室） === */
.chat-area p[style*="background-color"] {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  padding: 4px 8px !important;
  line-height: 1.2 !important;
  font-size: 15px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  max-width: 95%;
}


.user-name {
  font-weight: bold;
  color: #FFCC00;
  cursor: pointer;
  text-decoration: none;
}

.user-name:hover {
  color: #ffffff;
  text-decoration: underline;
}


.system-message {
  margin: 2px 0;
  padding: 4px 8px;
  background-color: #FFB6C1;
  color: black;
  border-radius: 5px;
  display: inline-block;
  font-size: 15px;
  line-height: 1.3;
}



/* 統一的可點擊暱稱樣式 */
.user-name {
  font-weight: bold;
  color: #FFCC00;
  cursor: pointer;
}

.user-name:hover {
  color: #ffffff;
  text-decoration: underline;
}



/* =======================================
   🌑 發送私訊樣式（深灰底）
   ======================================= */
.private-sent {
  background-color: #2b2b2b;      /* 深灰底 */
  color: #ffffff;                 /* 白字 */
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  white-space: pre-line;
}

/* =======================================
   🌑 接收私訊樣式（紫底 + 金框）
   ======================================= */
.private-recv {
  margin: 2px 0;                    /* 上下留白 2px */
  padding: 6px 10px;                /* 稍微增加內距讓框顯更粗 */
  background-color: #4a3a60;        /* 深紫灰背景 */
  border: 3px solid gold;           /* ⭐ 邊框變粗：從 1px 改為 2px */
  border-radius: 8px;               /* 圓角不變 */
  font-size: 15px;                  /* 字體大小一致 */
  color: #f3f3f3;                   /* 白灰字體 */
  line-height: 1.4;                 /* 微調行高，配合內距提升閱讀性 */
}

/* ✅ 進入聊天室 */
.system-enter {
  background-color: #4b0082; /* 紫色 */
  color: #fff;
  padding: 6px 12px;
  margin: 6px 0;
  border-left: 4px solid #a020f0;
  font-style: italic;
  border-radius: 4px;
}

/* ✅ 從其他房間進來的系統訊息 */
.system-otherroom {
  background-color: #1e3a5f;         /* 淺藍底色，可調淡藍感覺 */
  color: #ffffff;                   /* 白字 */
  padding: 6px 12px;                /* 內距 */
  margin: 6px 0;                    /* 上下間距 */
  border-left: 4px solid #5dade2;   /* 淺藍亮邊框 */
  font-style: italic;              /* 斜體提示 */
  border-radius: 4px;              /* 圓角 */
}

/* ✅ 更換聊天室 */
.system-change {
  background-color: #2e1d1a;      /* 深棕紅底色，穩重不刺眼 */
  color: #f0c8b0;                /* 柔和銅橘字體，視覺清晰 */
  padding: 6px 12px;
  margin: 6px 0;
  border-left: 4px solid #e67350; /* 銅紅色左線強調 */
  font-style: italic;
  border-radius: 4px;
}

/* ✅ 個人系統提示：歡迎進房 */
.system-me {
  background-color: #1e2b40;        /* 深藍灰底色 */
  color: #cfd8e3;                   /* 微亮灰藍文字 */
  padding: 6px 12px;
  margin: 6px 0;
  border-left: 4px solid #3b82f6;   /* 藍色邊線 */
  font-style: italic;
  border-radius: 4px;
}


@media (max-width: 480px) {


  /* ====================================
     📌 右側成員列表（桌機）隱藏
     ==================================== */
  .right-panel {
    display: none !important;    /* ✅ 小螢幕不顯示桌機成員欄，避免畫面擠壓 */
  }

  /* ====================================
     📌 手機滑出成員面板
     ==================================== */
  .mobile-member-panel {
    position: fixed;             /* ✅ 固定在畫面右側，可滑入 */
    top: 0;
    right: -100%;                /* ✅ 預設隱藏在畫面外 */
    width: 60%;                  /* ✅ 占手機畫面 80%，建議範圍：70% ~ 90% */
    height: 100%;
    background-color: #1a1a1a;   /* ✅ 深灰背景，與主體一致 */
    border-left: 2px solid gold; /* ✅ 金色邊框強調區隔 */
    z-index: 99;                 /* ✅ 保持在畫面上層 */
    transition: right 0.3s ease; /* ✅ 平滑滑入效果 */
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
  }

  .mobile-member-panel.active {
    right: 0;                    /* ✅ 啟用 active class 時滑出畫面 */
  }

  .member-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: gold;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .member-panel-header button {
    background: transparent;
    border: none;
    color: gold;
    font-size: 20px;
  }

  /* ====================================
     📌 成員清單項目樣式（滑出清單）
     ==================================== */
  #mobileMemberPanel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 280px;            /* ✅ 限制最大寬度，避免過寬 */
    height: 100%;
    background-color: #111;
    border-left: 1px solid #555;
    z-index: 9999;
    display: none;
    flex-direction: column;
  }

  #mobileMemberPanel.active {
    display: flex;
  }

  #mobileMemberList .member-item {
    padding: 8px 12px;           /* ✅ 成員列內距；建議範圍 6px ~ 14px */
    border-bottom: 1px solid #333;
    color: #ffc800;
    font-size: 14px;
    cursor: pointer;
  }

  .member-item {
    padding: 6px 10px;
    border-bottom: 1px solid #444;
    background-color: #1a1a1a;
    color: #fff;
    z-index: 10000;
    pointer-events: auto;
    cursor: pointer;
  }

  /* ====================================
     📌 成員浮動按鈕（右下角）
     ==================================== */
  .member-float-btn {
    position: fixed;
    bottom: 140px;               /* ✅ 與底部控制列留空，建議：80px ~ 120px */
    right: 12px;
    background-color: #ffc800;
    border: none;
    padding: 10px 14px;
    border-radius: 999px;
    z-index: 100;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 0 8px #000;
  }

  /* ====================================
     📌 標題區塊（手機）
     ==================================== */
  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background-color: #000;
    border-bottom: 2px solid gold;
  }

  .site-name {
    font-size: 24px;             /* ✅ 手機標題加大，提升辨識度；建議 20px ~ 26px */
    font-weight: bold;
    color: gold;
    margin: 0;
    text-align: left;
  }


  #currentRoomLabel {
    display: none;               /* ✅ 隱藏標題內房名，避免重複資訊 */
  }

  /* ====================================
     📌 聊天區預留底部空間
     ==================================== */
  #chatBox {
    padding-bottom: 160px;       /* ✅ 保留下方空間防止浮動按鈕擠住；建議 100px ~ 140px */
    box-sizing: border-box;
  }



  #sendBtn {
    background-color: gold;
    color: black;
    font-weight: bold;
    padding: 10px 18px;
    font-size: 16px;
    border-radius: 8px;
    margin-left: 6px;
  }
}




  .member-item {
    padding: 6px 10px;
    border-bottom: 1px solid #444;
    background-color: #1a1a1a;
    color: #fff;
    z-index: 10000;
    pointer-events: auto;
    cursor: pointer;
  }



.member-name {
  cursor: pointer !important;                        /* ✅ 滑鼠移上去變成可點選的手指圖示 */
  text-decoration: none !important;               /* ✅ 預設不加底線（滑過時才出現） */
  color: #fff !important;                         /* ✅ 預設文字顏色為白色，可調整為 #FFD700 金色等 */
  border-bottom: 2px solid transparent !important; /* ✅ 初始底線透明，保持空間，滑過時換成金色 */
  transition: all 0.3s ease !important;          /* ✅ 平滑動畫過渡，提升視覺質感 */
}

.member-name:hover {
  color: #FFD700 !important;                       /* ✅ 滑鼠移上去後變金色，呼應品牌色 */
  border-bottom: 2px solid #FFD700 !important;     /* ✅ 底部加上金色底線，凸顯選中效果 */
  text-shadow: 0 0 6px #FFD700 !important;       /* ✅ 金光效果，可調整為 2px~10px */
}


/* ✅ 預設電腦版隱藏手機用滑出成員欄 */
.mobile-member-panel {
  display: none;
}
/* ✅ 預設：手機板會顯示按鈕 */
.member-float-btn {
  display: block;
}

/* ✅ 電腦版時隱藏按鈕 */

.member-float-btn {
    display: none;
}




  /* ✅ 成員滑出欄限制寬度為畫面寬度的 33% */
  .mobile-member-panel {
    width: 33vw;                /* 佔畫面 1/3 寬 */
    max-width: 100vw;           /* 不超過整個畫面 */
    overflow-x: auto;           /* 開啟左右捲軸 */
    white-space: nowrap;        /* 禁止自動換行 */
  }

  /* ✅ 成員項目樣式：讓長名稱不會擠出格子 */
  .mobile-member-panel .member-item {
    display: block;
    overflow-x: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 8px 10px;
    border-bottom: 1px solid #333;
  }


/* ✅ 電腦版右側成員名稱變黃色 */
.right-panel .member-item {
  color: #FFD700;  /* 黃金色，可調整為你喜歡的黃色 */
}

/* ✅ 成員名稱預設樣式：金黃色＋間距美化 */
.right-panel .member-item {
  color: #FFD700;                    /* 金黃色文字 */
  padding: 6px 12px;                /* 增加內距 */
  margin-bottom: 4px;               /* 下方間距 */
  border-radius: 8px;               /* 圓角 */
  transition: all 0.3s ease;        /* 平滑過渡效果 */
  cursor: pointer;                 /* 滑鼠變成可點狀態 */
}

/* ✅ 滑過時的效果 */
.right-panel .member-item:hover {
  background-color: rgba(255, 215, 0, 0.1);  /* 微微的金色背景 */
  transform: scale(1.02);                    /* 稍微放大 */
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.3); /* 金色陰影光暈 */
}

/* ✅ 點下時（點擊按下去的瞬間） */
.right-panel .member-item:active {
  background-color: rgba(255, 215, 0, 0.2);  /* 按下去再亮一點 */
  transform: scale(0.98);                   /* 稍微縮小製造按壓感 */
}

/* ✅ 手機版：成員名稱樣式一致化（金黃＋互動效果） */
.mobile-member-panel .member-item {
  color: #FFD700;                    /* 金黃色 */
  padding: 6px 12px;                /* 內距 */
  margin-bottom: 4px;               /* 間距 */
  border-radius: 8px;               /* 圓角 */
  transition: all 0.3s ease;        /* 過渡效果 */
  cursor: pointer;                 /* 滑鼠提示 */
  white-space: nowrap;             /* 不換行 */
  overflow-x: auto;                /* 左右可滾動 */
}

/* ✅ 滑過手機版成員名稱 */
.mobile-member-panel .member-item:hover {
  background-color: rgba(255, 215, 0, 0.1);
  transform: scale(1.02);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

/* ✅ 手機點擊時效果 */
.mobile-member-panel .member-item:active {
  background-color: rgba(255, 215, 0, 0.2);
  transform: scale(0.98);
}


/* 黃金登入按鈕樣式 */
.login-button-gold {
  background: linear-gradient(145deg, #ffd95a, #c69500); /* 金黃到深金漸層 */
  border: 1.5px solid #fff0b3;                           /* 柔亮金邊框 */
  color: #4a2d00;                                        /* 深棕色字體（高對比） */
  padding: 10px 16px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;                                           /* 統一寬度 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 0 8px rgba(255, 230, 140, 0.2);           /* 微金色光暈 */
}

/* Hover 效果 */
.login-button-gold:hover {
  background: linear-gradient(145deg, #ffe37a, #d1a100); /* Hover 更亮金 */
  box-shadow: 0 0 14px rgba(255, 230, 140, 0.5);          /* Hover光暈加強 */
  transform: translateY(-1px) scale(1.02);               /* 微浮動 */
}

/* Icon 樣式（如有） */
.login-button-gold img {
  width: 18px;
  height: 18px;
  filter: brightness(1.2);
}




/* 留言按鈕樣式 */
.feedback-button {
	
  background: linear-gradient(145deg, #5b3474, #2c173d);  /* 深紫～暗紫漸層 */
  border: 1.5px solid #a88bff;                            /* 柔亮金紫邊框 */
  color: #e7dcff;                                          /* 微亮紫白字 */
  padding: 10px 16px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 0 8px rgba(168, 139, 255, 0.2);           /* 微光暈 */
}

/* Hover 效果 */
.feedback-button:hover {
  background: linear-gradient(145deg, #7a4dbd, #422763); /* Hover紫加亮 */
  box-shadow: 0 0 14px rgba(168, 139, 255, 0.4);          /* Hover光暈 */
  transform: translateY(-1px) scale(1.02);               /* 微浮動 */
}

/* Icon 樣式 */
.feedback-button img {
  width: 18px;
  height: 18px;
  filter: brightness(1.2);
}


/* === 主標題文字樣式 === */
.title-box h1 {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(45deg, #ffe066, #ffba00); /* 黃金漸層 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 5px rgba(255, 220, 100, 0.6),
    0 0 12px rgba(255, 220, 100, 0.4);                 /* 金色光暈字 */
  margin: 0;
}

/* === 通用 Select 樣式 === */
select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ffcc33;                    /* 金色邊框 */
  border-radius: 10px;
  background-color: #1a1a1a;                      /* 深底 */
  color: #fff;
  font-size: 16px;
  appearance: none;                               /* 隱藏原生箭頭 */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='16' height='16' fill='gold' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E"); /* 自訂下拉箭頭 */
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  transition: all 0.3s ease;
  box-shadow:
    0 0 4px rgba(255, 204, 0, 0.3),
    inset 0 0 6px rgba(255, 204, 0, 0.1);
}

/* === 選單 hover / focus 效果 === */
select:hover,
select:focus {
  border-color: #ffe066;
  outline: none;
  box-shadow:
    0 0 6px rgba(255, 220, 100, 0.5),
    inset 0 0 6px rgba(255, 220, 100, 0.2);
}

/* ✅ 統一選單下拉項目的顏色與背景 */
select option {
  background-color: #1a1a1a;   /* 黑底 */
  color: #ffc800;              /* 金黃色字 */

  font-size: 16px;             /* 字體大小與外觀一致 */
  font-family: "Noto Sans TC", sans-serif;
}

/* ✅ 強化整體 select 元件外觀一致性 */
select {
  background-color: #111;     /* 外框色 */
  color: #ffc800;             /* 外觀文字色 */
  border: 1px solid #ffc800;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 16px;
  font-family: "Noto Sans TC", sans-serif;
  appearance: none;           /* 移除系統原生樣式（必要） */
  -webkit-appearance: none;
  -moz-appearance: none;

}

/* ✅ 統一箭頭樣式：使用背景圖片或置入 SVG（進階可加） */
/* 這邊略過，維持目前原生樣式最穩定 */


/* ✅ 主副標統一紫色風格：清晰微光 */
.login-title, .login-subtitle {
  color: #caa8ff;                               /* 柔紫：優雅性感 */
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 0 2px #a974ff88;               /* 淡淡光暈 */
  margin: 0;
  padding: 0;
}

/* ✅ 主標語字體較大、偏亮紫 */
.login-title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 6px;
  color: #d8b5ff;
}

/* ✅ 副標語略小、淡一階 */
.login-subtitle {
  font-size: 15px;
  font-weight: normal;
  color: #e2c4ff;
  margin-bottom: 16px;
}


/* ✅ 讓登入區與條款區的上下內距收緊，與整體一致靠邊 */
.login-box,
.footer-box {
  padding-top: 2px !important;     /* 原本可能是 20~30px，這裡改成 8px */
  padding-bottom: 8px !important;
}

/* ===============================
   🎨 聊天室上方 select 選單樣式：#roomSelect
   =============================== */
#roomSelect {
  background-color: #1a1a1a;      /* 黑色底 */
  color: #ffc800;                /* 金色字 */
  border: 1px solid #ffc800;     /* 金色邊框 */
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  box-shadow: 0 0 5px #ffc80066; /* 金色光暈 */
  height: 34px;                  /* 控制高度一致 */
  max-width: 220px;              /* ✅ 避免拉太長 */
  width: 100%;                   /* 自適應寬度 */
}

/* 可選：讓 roomSelect 靠右（依你聊天室版型） */
.room-select-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}



/* ===============================
   🎯 頂部欄位：左右對齊 + 限制寬度
   =============================== */
   
   

/* 🎯 聊天室選單：靠右且不寬 */
#roomSelect {
  background-color: #1a1a1a;
  color: #ffc800;
  border: 1px solid #ffc800;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  box-shadow: 0 0 5px #ffc80066;
  height: 34px;
  width: 130px;              /* ✅ 寬度明確限制 */
  max-width: 100%;
}




/* ===============================
   🎯 頂部欄位：左右對齊 + 限制寬度
   =============================== */
.top-bar {
  display: flex;                   /* 左右排列 */
  justify-content: space-between; /* 左右兩邊 */
  align-items: center;
  padding: 6px 10px;
  background-color: #000;         /* 確保背景一致 */
}

.title {
  color: #ffc800;
  font-weight: bold;
  font-size: 18px;
}



/* ====================================
   🌌 紫色系按鈕樣式（更新名單、清空畫面、離開聊天）
   ==================================== */
.btn-purple {
  background: linear-gradient(145deg, #5e2b93, #8e44ad);  /* 深紫漸層背景 */
  border: 1px solid #b97bff;                              /* 紫色亮邊框 */
  color: #fff;                                            /* 白字 */
  border-radius: 12px;                                    /* 圓角 */
  padding: 8px 14px;                                      /* 內距 */
  margin: 4px 6px;                                        /* 間距 */
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 0 8px #b97bff88;                          /* 發光陰影 */
  transition: all 0.2s ease-in-out;
}

.btn-purple:hover {
  background: #b97bff;                                    /* 滑過亮紫 */
  color: #000;                                            /* 滑過變深字 */
  transform: translateY(-2px);
  box-shadow: 0 0 12px #d7a3ff;
}

/* ====================================
   🌟 金黃系送出按鈕（改良一致風格）
   ==================================== */
.btn-yellow-wide {
  background: linear-gradient(145deg, #d4a017, #ffcc33);  /* 金黃漸層背景 */
  border: 2px solid #ffd700;                             /* ⭐ 金色邊框加粗 */
  color: #000;                                            /* 黑字 */
  border-radius: 14px;                                    /* 圓角略增：視覺更飽滿 */
  padding: 7px 21px;                                     /* 上下更高，整體提高比例 */
  font-size: 16px;                                        /* 字體略大 */
  font-weight: bold;                                      /* 強調按鈕感 */
  margin: 6px 8px;                                        /* 避免壓迫感，適當留白 */
  box-shadow: 0 0 10px #ffd700aa;                         /* 發光感微強，透明度調柔 */
  transition: all 0.2s ease-in-out;                       /* 平滑過渡特效 */
}

.btn-yellow-wide:hover {
  background: #ffe066;                                    /* 滑過背景改亮黃 */
  color: #111;                                            /* 字色略深更穩重 */
  transform: translateY(-2px);                            /* 漂浮特效 */
  box-shadow: 0 0 14px #fff0a3;                           /* 滑過光暈更柔和擴散 */
}





.chat-line.public-message,
.private-sent,
.private-recv,
.system-enter,
.system-leave,
.system-otherroom,
.system-change {
  font-size: 16px;  /* ✅ 統一字體大小 */
}

.clickable-name {
  color: #FFCC00 !important;            /* 黃色字 */
  font-weight: bold;
  cursor: pointer;
  text-decoration: underline !important; /* ✅ 一律有底線 */
}

.clickable-name:hover {
  color: #FFFF66 !important;             /* 滑過更亮 */
  text-shadow: 0 0 5px #ff0;
}


.system-leave {
  background-color: #5a1a1a;     /* 淡紅背景 */
  color: #fff;
  padding: 6px 12px;
  margin: 6px 0;
  border-left: 4px solid #ff6666; /* 淺紅邊條 */
  font-style: italic;
  border-radius: 4px;
}

.chat-line.public-message {
  background-color: #000000;        /* 黑底 */
  color: #ffffff;                   /* 白字 */
  border-left: 4px solid #999999;   /* 灰色左框 */
  padding: 6px 12px;
  margin: 6px 0;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
  display: block;
  font-style: normal;
}

.chat-line.system-switch {
  background-color: #222;
  color: #ffc800;
  padding: 6px 10px;
  margin: 5px 0;
  border-left: 4px solid #ffc800;
}


/* ✅ 手機螢幕：縮小聊天室訊息字體並取消斜體 */
@media screen and (max-width: 480px) {
  .public-message,
  .private-sent,
  .private-recv,
  .system-enter,
  .system-change,
  .system-me,
  .system-otherroom,
  .system-otherroo
  .system-leave {
    font-size: 12px !important;   /* 字體縮小 */
    line-height: 1.3;             /* 行距略緊縮 */
    font-style: normal !important; /* ❌ 強制取消斜體 */
  }
}

/* ✅ 手機滑出成員欄：上方標題與關閉按鈕 */
.mobile-member-panel {
  background-color: #111; /* 深色背景 */
  color: #ffd700;         /* 預設文字金色 */
  width: 80%;
  max-width: 300px;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 10px rgba(255, 215, 0, 0.3); /* 右側陰影 */
  border-left: 2px solid #ffd700;
}

.member-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;

  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.4), rgba(0, 0, 0, 0.2));  /* ✅ 淺黑透明背景，去除死黑感 */
  border-bottom: 1px solid #444;  /* ✅ 金邊改成細暗邊 */
  backdrop-filter: blur(6px);     /* ✅ 模糊背景感（選配） */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* ✅ 下方陰影過渡 */
  border-radius: 0 0 8px 8px;     /* ✅ 底部圓角讓過渡更柔和 */
}

.member-panel-header span {
  font-size: 18px;
  font-weight: bold;
  color: #ffd700;              /* 金色標題 */
  letter-spacing: 1px;
}

.member-panel-header button {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: #ffd700;              /* 金色按鈕 */
  cursor: pointer;
  transition: color 0.2s ease-in-out, transform 0.2s ease;
}

.member-panel-header button:hover {
  color: #fff799;              /* 滑過變亮金 */
  transform: scale(1.1);       /* 微放大 */
}


/* ✅ 手機版送出按鈕高度調整 */
#sendBtn {
  height: 40px;                     /* ✅ 建議高度 */
  padding: 0 16px;                  /* ✅ 左右內距 */
  font-size: 16px;                  /* ✅ 文字大小 */
  font-weight: bold;               /* ✅ 字體加粗 */
  line-height: 1;                   /* ✅ 垂直置中 */
  background: linear-gradient(145deg, #ffcc00, #ffaa00); /* ✅ 黃色漸層 */
  color: #111;                      /* 黑字 */
  border: 1px solid #ffcc00;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 8px;                 /* 與輸入框間距 */
  flex-shrink: 0;
}

/* ✅ 確保輸入區與送出鍵並排對齊 */
.message-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #000;
}





/* 🌌 紫色系按鈕樣式（清空對象） - 建議值已內嵌說明 */
.chat-btn-clear {
  background: linear-gradient(145deg, #5e2b93, #8e44ad);  /* 漸層背景（建議120deg～160deg，深紫至亮紫） */
  border: 1px solid #b97bff;                              /* 邊框亮紫（建議1~2px） */
  color: #fff;                                            /* 白字（可改 #f0f0f0） */
  border-radius: 10px;                                    /* 圓角10px（建議6~14px） */
  padding: 6px 12px;                                      /* 內距上下6px 左右12px（建議垂直4~10px） */
  margin: 4px 6px;                                        /* 外距（建議2~8px） */
  font-size: 14px;                                        /* 字級（建議13~16px） */
  font-weight: bold;                                      /* 粗體強調 */
  box-shadow: 0 0 4px #b97bff88;                          /* 陰影模糊度4px（建議3~8px） */
  transition: all 0.2s ease-in-out;                       /* 動畫0.2秒平滑（建議0.15~0.3s） */
}

.chat-btn-clear:hover {
  background: #b97bff;                                    /* 滑過變亮紫（建議 #b97bff ~ #d1aaff） */
  color: #000;                                            /* 滑過變黑字 */
  transform: translateY(-1px);                            /* 上浮1px（穩定感） */
  box-shadow: 0 0 8px #d7a3ff;                            /* 滑過光暈擴大（建議6~10px） */
}





#messageInput {
  background-color: #222;
  color: #fff;
  padding: 10px 14px;
  border: 2px solid gold;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  flex: 1;
  transition: all 0.25s ease;
}

#messageInput:focus {
  border-color: #ffc800;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.bottom-bar .btn {
  min-width: 110px;
  padding: 6px 16px;
  font-size: 15px;
  border-radius: 8px;
}


/* ✅ 下方控制列外層容器美化設定 */
.bottom-bar {
  padding: 3px 5px;           /* ⬅️ 內距：上下 12px，左右 16px，讓內容不貼邊 */
  margin: 0 5px 5px 5px;     /* ⬅️ 外距：下方與左右保留 10px 空間，避免貼視窗邊 */
  background-color: transparent;/* ⬅️ 移除底色，讓畫面更輕盈 */
  display: flex;                /* ⬅️ 使用彈性盒模型方便分段 */
  flex-direction: column;      /* ⬅️ 直向排列（每一列一行） */
  gap: 5px;                    /* ⬅️ 每行之間的垂直距離，建議 8~12px */
}

/* ✅ 每一行按鈕或輸入區的橫向排列設定 */
.row-input {
  display: flex;                  /* ⬅️ 橫向排列子項目 */
  align-items: center;           /* ⬅️ 垂直置中對齊 */
  justify-content: space-between;/* ⬅️ 左右留空間，讓按鈕貼齊兩側 */
  gap: 10px;                      /* ⬅️ 項目間的水平距離，建議 8~12px */
  width: 100%;                   /* ⬅️ 填滿整個父層寬度 */
}


/* ====================================
   🌌 紫色系按鈕樣式（更新名單、清空畫面、離開聊天）
   ==================================== */
.chat-btn-clear {
  background: linear-gradient(145deg, #5e2b93, #8e44ad);  /* 深紫漸層背景 */
  border: 1px solid #b97bff;                              /* 紫色亮邊框 */
  color: #fff;                                            /* 白字 */
  border-radius: 12px;                                    /* 圓角 */
  padding: 8px 14px;                                      /* 內距 */
  margin: 4px 6px;                                        /* 間距 */
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 0 8px #b97bff88;                          /* 發光陰影 */
  transition: all 0.2s ease-in-out;
}

.chat-btn-clear:hover {
  background: #b97bff;                                    /* 滑過亮紫 */
  color: #000;                                            /* 滑過變深字 */
  transform: translateY(-2px);
  box-shadow: 0 0 12px #d7a3ff;
}