.chat-panel {
  position: absolute;
  z-index: 80;
  top: 0;
  right: 0;
  width: var(--layout-chat-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.02);
  background: #12131a;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.4,0,.2,1),visibility .35s;
}

body.chat-open .chat-panel { transform: translateX(0); visibility: visible; pointer-events: auto; }
.chat-panel__header { display: none; }
.airdrop-history { width: 100%; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; border-radius: 0 0 8px 8px; background: #101d2f; color: #97e0ff; text-transform: uppercase; font-family: "Roboto Condensed",sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.chat-messages { position: relative; right: auto; bottom: auto; min-height: 0; width: 100%; flex: 1 1 0; padding: 16px; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #343b50 transparent; }
.chat-composer { width: 100%; min-height: 112px; flex: 0 0 auto; padding: 16px; padding-bottom: max(16px,env(safe-area-inset-bottom)); background: #151823; }
.chat-composer__row { display: flex; gap: 8px; }
.chat-composer__row label { position: relative; min-width: 0; height: 48px; flex: 1; }
.chat-composer input { width: 100%; height: 48px; padding: 0 48px 0 16px; border: 1px solid transparent; border-radius: 8px; outline: 0; background: #12131a; color: #fff; }
.chat-composer input:focus { border-color: #3680be; }
.chat-composer__row label > img { position: absolute; top: 14px; right: 16px; width: 20px; height: 20px; opacity: .68; pointer-events: none; }
.chat-composer__row button { width: 48px; height: 48px; flex: 0 0 48px; border: 0; border-radius: 8px; background: var(--blue); }
.chat-composer__row button img { width: 20px; height: 20px; display: block; margin: auto; }
.chat-meta { height: 32px; display: flex; align-items: flex-end; justify-content: space-between; color: #606d8e; font-size: 10px; }
.chat-meta span { display: flex; align-items: center; gap: 8px; }
.chat-meta img { width: 16px; height: 16px; }
.chat-floating-button { position: fixed; z-index: 35; right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); width: 48px; height: 48px; padding: 12px; display: none; border: 0; border-radius: 50%; background: #3680be; box-shadow: 0 12px 30px rgba(0,0,0,.42); }
.chat-floating-button img { width: 24px; height: 24px; filter: brightness(2); }

@media (max-width: 1023px) {
  .chat-panel { position: fixed; inset: 0; width: 100%; height: 100dvh; border: 0; }
  .chat-panel__header { height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(96,109,142,.25); background: #151823; }
  .chat-panel__header > img { width: 132px; height: 38px; object-fit: contain; object-position: left; }
  .chat-panel__header span { margin-left: auto; display: flex; align-items: center; gap: 6px; color: #8c95ae; font-size: 11px; }
  .chat-panel__header span img { width: 16px; height: 16px; }
  .chat-close { width: 40px; height: 40px; padding: 10px; border: 0; border-radius: 8px; background: #2c3243; }
  .chat-close img { width: 20px; height: 20px; transform: rotate(180deg); }
  .airdrop-history { border-radius: 0; }
  .chat-messages { padding-bottom: 20px; }
  .chat-floating-button { display: block; }
  body.chat-open .chat-floating-button { opacity: 0; pointer-events: none; }
}

@media (min-width: 1024px) {
  .chat-close { display: none; }
}