/* 背景与全局字体 */
body {
  margin: 0;
  background-color: #121518;
  font-family: Arial, sans-serif;
  color: white;
}

/* 容器 */
.chat-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
  background-color: #121518;
}

/* 顶部标题栏 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px; /* ✅ 强制固定顶部栏高度 */
  overflow: hidden; /* ✅ 防止内部元素撑开它 */
  border-bottom: 1px solid #2A2F32;
  font-size: 24px;
}

.logo-title img {
  height: 57px;       /* ✅ 根据 top-bar 高度自动缩放 */
  object-fit: contain;
  display: block;
}

.title {
  font-size: 1.8rem;
  font-weight: bold;
}
.top-icons span {
  font-size: 1.3rem;
  margin-left: 10px;
  cursor: pointer;
}

/* 聊天区 */
.chat-list {
  padding-bottom: 70px;
}
.chat-item {
  display: flex;
  padding: 12px 0;
 /* border-bottom: 1px solid #2A2F32; */
}
.avatar {
  margin-right: 12px;
}
.avatar img, .circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #000;
}
.chat-info {
  flex: 1;
}
.top-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
}
.name {
  font-weight: bold;
}
.time {
  color: #A8A8A8;
  font-size: 0.8rem;
}
.message {
  font-size: 0.9rem;
  color: #B8B8B8;
  margin-top: 2px;
}

/* 底部导航栏 */
.bottom-nav-wrapper {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);  /* ✅ 完美居中 */
  width: 100%;
  max-width: 500px;             /* ✅ 跟 chat-container 同宽 */
  background-color: #000;
  z-index: 999;
}

.bottom-nav {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

.nav-item {
  text-align: center;
  font-size: 0.9rem;
}
  
/* misc */
.icon svg {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.message {
  max-width: 100%;
  overflow: hidden;
}

.marquee-wrapper {
  width: 240px;
  overflow: hidden;
  position: relative;
}

.marquee {
  white-space: nowrap;
  display: inline-block;
  transform: translateX(0);
}


.online-status,
.maintenance-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.status-text {
  font-family: 'Segoe UI', sans-serif; /* 字体更现代美观 */
  letter-spacing: 0.3px;
}

.online-status .status-text {
  color: #4cfe54;
}

.maintenance-status .status-text {
  color: #ff1414;
}

.green-dot,
.orange-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.green-dot {
  background-color: #4cfe54;
}

.orange-dot {
  background-color: #ff1414;
}

.profile-pic.maintenance {
  filter: grayscale(100%) brightness(70%);
  opacity: 0.6;
}

.fab-button {
  position: fixed;
  bottom: 80px;
  right: 11px;
  width: 56px;
  height: 56px;
  background-color: #25D366;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 1000;
}

/* 📱 默认（移动设备）右下角 */
@media screen and (min-width: 768px) {
  .fab-button {
    right: calc(48% - 240px + 24px);  /* 240px = 480px / 2，保持按钮在内容右侧 24px 处 */
  }
}

.fab-button img {
  width: 40px;
  height: 40px;
}

.chat-container {
  position: relative;
  max-width: 480px; /* 或你真实容器宽度 */
  margin: 0 auto;
}


.fab-dialog {
  position: absolute; /* 绝对定位，相对于 .fab-button */
  bottom: 83%; /* 贴着按钮上方 */
  right: 0;     /* 靠右对齐 */
  margin-bottom: 8px; /* 与按钮间距 */
  background-color: #06060678;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  font-size: 14px;
  max-width: 180px;
  z-index: 1001;
  display: none;
  animation: fadeIn 0.5s ease;
}

.fab-dialog .close-btn {
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

.fab-dialog .close-btn:hover {
  color: #000;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.bottom-row {
  display: flex;
  align-items: center;
  gap: 8px; /* 调整 Kimochi 与 RTP 间距 */
}

.rtp-indicator {
  font-size: 12px;
  color: #ffc107;
  background-color: rgba(255, 193, 7, 0.1);
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: bold;
  transition: color 0.3s ease;
}

.message-rtp {
  display: flex;
  align-items: center;
  gap: 6px; /* Kimochi 与 RTP 间距 */
  margin-top: 2px;
}

.rtp-badge {
  font-size: 12px;
  background-color: rgba(255, 193, 7, 0.1);
  color: #ffc107;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}

.rtp-change {
  font-size: 11px;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rtp-change.up::before {
  content: "▲ ";
  color: #00ff00;
}

.rtp-change.down::before {
  content: "▼ ";
  color: #ff4444;
}

/* 防止 Safari 自动将电话号码变蓝、链接化 */
a[href^="tel"],
a[href^="tel"]:link,
a[href^="tel"]:visited {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
}

/* 全站链接样式统一（包括 http/https/email） */
a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit !important;
  text-decoration: none !important;
}

.online-wrapper {
  display: flex;
  align-items: center;       /* ✅ 垂直居中對齊 Admin Utama */
  gap: 6px;                  /* ✅ ONLINE 和 icon 之間的距離 */
  margin-top: 1px;           /* ✅ 微調貼齊 */
}


.chat-icon-wrapper img {
  width: 16px;
  height: 16px;
  display: block;
}



.chat-icon-wrapper img {
  display: block;        /* ✅ 避免 inline 元素造成空隙 */
  width: 12px;
  height: 12px;
}


.chat-button {
  width: 18px;
  height: 18px;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.chat-button:hover {
  opacity: 1;
}


.modal {
  display: none; /* 初始不顯示 */
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #222222bd;
  color: #fff;
  padding: 24px;
  border-radius: 10px;
  width: 260px;
  text-align: center;
  box-shadow: 0 0 12px #000;
  animation: fadeIn 0.3s ease;
}

.modal-buttons {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.modal-content button {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
}

.pm-button {
  background: #4caf50;
  color: white;
}
.pm-button:hover {
  background: #45a047;
}

.close-button {
  background: #aaa;
  color: black;
}
.close-button:hover {
  background: #888;
}

@keyframes fadeIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-icon {
  width: 40px;
  height: 40px;
  margin-bottom:-18px;
}
.name-wrapper {
  display: inline-flex;
  align-items: center;
}

.name {
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
}

.verified-icon {
  width: 16px;
  height: 16px;
  margin-left: 3px; /* 想極貼就設為 0 或 1 */
  vertical-align: middle;
}