.bottom-nav{grid-template-columns:repeat(3,1fr)!important}.chat-page{max-width:980px;margin:0 auto;padding:26px 22px 100px}.chat-shell{border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#141419,#0e0e11);overflow:hidden;box-shadow:0 24px 70px #0005}.chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:25px 27px 20px;border-bottom:1px solid var(--line)}.chat-head h1{margin:0 0 7px;font-size:28px}.chat-head p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.55}.online-badge{white-space:nowrap;border:1px solid #5d3907;background:#2b1b05;color:#ffb31d;border-radius:20px;padding:8px 12px;font-size:12px;font-weight:800}.chat-tabs{display:flex;gap:7px;padding:13px 20px;border-bottom:1px solid var(--line);background:#0d0d10}.chat-tabs button{border:1px solid #2e2e35;background:#18181d;color:#92929d;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:800;cursor:pointer}.chat-tabs button.active{background:var(--accent);border-color:var(--accent);color:#1b1100}.chat-messages{height:min(48vh,470px);min-height:290px;overflow:auto;padding:20px 24px;scroll-behavior:smooth}.chat-message{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;margin-bottom:16px}.chat-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#23c6e8,#087bbb);font-weight:900;color:white}.chat-bubble{max-width:760px;background:#1a1a20;border:1px solid #2c2c34;border-radius:4px 15px 15px 15px;padding:11px 14px}.chat-message.is-request .chat-avatar{background:linear-gradient(135deg,#ffb20b,#e57200);color:#211200}.chat-message.is-request .chat-bubble{border-color:#684108;background:#211805}.chat-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.chat-meta strong{font-size:14px}.chat-meta span{font-size:11px;color:#898993}.chat-bubble p{margin:6px 0 0;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.chat-empty{height:100%;display:grid;place-content:center;text-align:center;color:var(--muted)}.chat-empty span{font-size:40px}.chat-empty strong{color:#ddd;margin-top:8px}.chat-empty p{margin:5px}.chat-compose{border-top:1px solid var(--line);background:#121217;padding:18px 24px}.chat-compose label{display:block;color:#aaa;font-size:13px;font-weight:700}.chat-fields{display:grid;grid-template-columns:1fr 210px;gap:12px;margin-bottom:12px}.chat-compose input,.chat-compose select,.chat-compose textarea{display:block;width:100%;margin-top:7px;border:1px solid #34343d;border-radius:10px;background:#1a1a20;color:#fff;padding:11px;outline:none}.chat-compose textarea{resize:vertical;min-height:74px}.chat-compose input:focus,.chat-compose textarea:focus,.chat-compose select:focus{border-color:var(--accent)}.chat-submit{display:flex;align-items:center;justify-content:space-between;margin-top:11px}.chat-submit small{color:#777}@media(max-width:600px){.chat-page{padding:14px 12px 85px}.chat-head{display:block;padding:20px}.online-badge{display:inline-block;margin-top:14px}.chat-head h1{font-size:24px}.chat-messages{padding:16px 14px;height:43vh}.chat-compose{padding:15px}.chat-fields{grid-template-columns:1fr}.chat-message{grid-template-columns:35px minmax(0,1fr)}.chat-avatar{width:35px;height:35px}.chat-tabs{overflow:auto;padding:11px}.chat-tabs button{white-space:nowrap}}


/* Avatar Change Success Modal & Logger UI */
.chat-avatar-success-modal {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.chat-avatar-success-modal.is-closing {
  animation: modalFadeOut 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.chat-avatar-success-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chat-avatar-success-card {
  position: relative;
  width: 100%;
  max-width: 330px;
  background: linear-gradient(145deg, #182030, #0f1523);
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(245, 158, 11, 0.25);
  border-radius: 18px;
  padding: 24px 20px 20px;
  text-align: center;
  color: #fff;
  z-index: 1;
}
.chat-avatar-success-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}
.chat-avatar-success-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.chat-avatar-success-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.45);
  margin-bottom: 14px;
}
.chat-avatar-success-preview-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 14px;
}
.chat-avatar-success-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f59e0b;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.55);
  background: #090e17;
  display: block;
}
.chat-avatar-success-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #fde68a;
  letter-spacing: 0.2px;
}
.chat-avatar-success-desc {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #cbd5e1;
}
.chat-avatar-success-desc strong {
  color: #fff;
}
.chat-avatar-success-actions {
  display: flex;
  justify-content: center;
}
.chat-avatar-success-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0b0f19;
  font-weight: 800;
  font-size: 14px;
  border: none;
  border-radius: 12px;
  padding: 11px 24px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  transition: all 0.2s;
  width: 100%;
}
.chat-avatar-success-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes modalFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}