/* App-style layout: the chat fills exactly the part of the screen you can see
   (chat.js keeps it matched to the visible area, so phone toolbars and the
   keyboard never cover the typing box). Messages scroll inside; the page itself never does. */
html, body { margin: 0 !important; height: 100%; overflow: hidden; }
#wpadminbar { display: none !important; }
html, body, .ayo-chat__scroll { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .ayo-chat__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

body.ayo-chat-page {
  background: #0B0B12;
  color: #111111;
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
.ayo-chat-page * { box-sizing: border-box; }

.ayo-chat {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #0B0B12;
  overflow: hidden;
}

.ayo-chat__top {
  display: flex; align-items: center; gap: 14px;
  padding: max(20px, env(safe-area-inset-top)) 20px 40px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
  color: #FFFFFF; flex-shrink: 0;
}
.ayo-chat__back {
  width: 44px; height: 44px; border-radius: 14px; border: 2px solid #2A2A36;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ayo-chat__back:focus-visible { outline: 3px solid #22E4FF; outline-offset: 2px; }
.ayo-chat__avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  background: #1A0A22; border: 2px solid #22E4FF; box-shadow: 0 0 12px #22E4FF; flex-shrink: 0;
}
.ayo-chat__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ayo-chat__name { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.ayo-chat__status { font-size: 13px; color: #B6FF3B; display: flex; align-items: center; gap: 6px; }
.ayo-chat__dot { width: 7px; height: 7px; border-radius: 50%; background: #B6FF3B; box-shadow: 0 0 8px #B6FF3B; }

.ayo-chat__panel {
  flex: 1; min-height: 0;
  margin-top: -16px;
  background: #FFFFFF;
  border-radius: 30px 30px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.ayo-chat__scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 20px 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ayo-chat__label { font-size: 12px; font-weight: 600; color: #6A6A74; }

.ayo-bubble {
  max-width: 82%; padding: 12px 16px; font-size: 15px; line-height: 1.4;
  border-radius: 20px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ayo-bubble--owner { align-self: flex-start; background: #F1F1F4; border-radius: 20px 20px 20px 6px; }
.ayo-bubble--me {
  align-self: flex-end; background: #0B0B12; color: #FFFFFF;
  border: 2px solid #22E4FF; box-shadow: 0 0 12px rgba(34,228,255,0.45);
  border-radius: 20px 20px 6px 20px; padding: 11px 15px;
}
.ayo-bubble--pending { opacity: .6; }
.ayo-bubble--tip {
  align-self: flex-start; max-width: 86%;
  background: #0B0B12; color: #D9D9E2;
  border: 2px solid #B6FF3B; box-shadow: 0 0 12px rgba(182,255,59,0.45);
  border-radius: 20px 20px 20px 6px;
  padding: 12px 16px;
  display: none; align-items: center; gap: 6px; white-space: normal;
}
.ayo-bubble--tip.is-visible { display: flex; }
.ayo-tip__text { font-size: 14px; line-height: 1.5; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ayo-tip__text b { color: #FFFFFF; }
.ayo-tip__text .ayo-save__install { color: #FFFFFF; }
.ayo-tip__close {
  border: 0; background: transparent; cursor: pointer; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ayo-tip__close:hover { background: #1C1C27; }
.ayo-save__install { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

.ayo-chat__as { align-self: center; font-size: 12px; font-weight: 500; color: #6A6A74; margin-top: 6px; }
.ayo-chat__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ayo-chat__list li { display: flex; flex-direction: column; }

/* Join */
.ayo-join { display: flex; flex-direction: column; gap: 12px; padding: 0 22px 30px; flex-shrink: 0; }
.ayo-join[hidden], .ayo-compose[hidden], .ayo-ping[hidden] { display: none; }
.ayo-join__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.05; }
.ayo-join__sub { margin: 0; font-size: 14px; color: #55555F; }
.ayo-join__label { font-size: 14px; font-weight: 600; margin-top: 4px; }
.ayo-input {
  height: 54px; border-radius: 18px; border: 2px solid #111111; background: #FFFFFF; color: #111111;
  font-size: 17px; padding: 0 18px; font-family: inherit; outline: none; width: 100%;
}
.ayo-input:focus { border-color: #0A63C9; box-shadow: 0 0 0 3px rgba(10,99,201,0.2); }
.ayo-input::placeholder { color: #767680; }
.ayo-cta {
  height: 56px; border-radius: 18px; border: 2px solid #22E4FF; background: #0B0B12; color: #FFFFFF;
  font-size: 17px; font-weight: 800; font-family: inherit; cursor: pointer;
  box-shadow: 0 0 18px rgba(34,228,255,0.6);
}
.ayo-cta:disabled { opacity: .6; cursor: default; }
.ayo-error { margin: 0; min-height: 0; font-size: 14px; color: #C2185B; font-weight: 600; }
.ayo-error:empty { display: none; }

/* Ping opt-in */
.ayo-ping {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 16px 10px; padding: 10px 10px 10px 14px; border: 2px solid #111111; border-radius: 16px;
  font-size: 14px; font-weight: 600; flex-shrink: 0;
}
.ayo-ping__btn {
  border: 2px solid #22E4FF; background: #0B0B12; color: #FFFFFF; font: inherit; font-weight: 800;
  border-radius: 12px; padding: 8px 14px; cursor: pointer; box-shadow: 0 0 10px rgba(34,228,255,0.5);
}

/* Compose */
.ayo-compose {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  border-top: 1px solid #E6E6EA; flex-shrink: 0;
  background: #FFFFFF;
}
.ayo-compose__input { height: auto; min-height: 52px; max-height: 140px; padding: 14px 16px; resize: none; line-height: 1.35; font-size: 16px; }
.ayo-send {
  width: 52px; height: 52px; border-radius: 18px; border: 2px solid #FF3EC8; background: #0B0B12;
  box-shadow: 0 0 14px rgba(255,62,200,0.6); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.ayo-send:focus-visible, .ayo-cta:focus-visible, .ayo-ping__btn:focus-visible { outline: 3px solid #111111; outline-offset: 2px; }
.ayo-compose__error { padding: 0 18px 12px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}