/* Chat tab: the chat fills the screen above the mini player */
.chat-view { display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + var(--space-2)) var(--space-2) var(--space-2); }
.chat {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; border-radius: var(--r-md);
  --bubble-them: color-mix(in srgb, var(--text) 8%, var(--card));
  --bubble-me: var(--accent-strong);
}

/* The conversation keeps at least a few lines; when the screen is short (landscape, keyboard up) the
   member bar below gives way and scrolls instead */
.chat-stage { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-height: min(6rem, 40%); }
#chat-wrap converse-root { display: block; flex: 1; min-height: 0; position: relative; isolation: isolate; }   /* contains Converse's z-index: 1031 */

/* Until the room is on screen: a sketch of the chat while joining, a reason and a retry when it can't */
.chat-state {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-5); background: var(--card); color: var(--muted); font-size: var(--fs-label); text-align: center;
}
.chat-state[hidden] { display: none; }
.chat-state p { margin: 0; max-width: 32ch; text-wrap: balance; }
.chat-skeleton { flex: 1; align-self: stretch; display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; }
.chat-state:not([data-state="loading"]) .chat-skeleton { display: none; }
.chat-skeleton i {
  flex: none; height: 36px; width: 58%; border-radius: var(--r-tail) var(--r-bubble) var(--r-bubble) var(--r-bubble); background: var(--bubble-them);
  animation: skeleton 1.4s ease-in-out infinite alternate;
}
.chat-skeleton i:nth-child(2) { width: 44%; height: 52px; animation-delay: .15s; }
.chat-skeleton i:nth-child(4) { width: 66%; animation-delay: .3s; }
.chat-skeleton i:nth-child(6) { width: 38%; animation-delay: .45s; }
.chat-skeleton i.me { align-self: flex-end; width: 40%; border-radius: var(--r-bubble) var(--r-tail) var(--r-bubble) var(--r-bubble); background: color-mix(in srgb, var(--accent) 22%, var(--card)); }
@keyframes skeleton { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-skeleton i { animation: none; opacity: .7; } }
.chat-retry {
  min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--r-sm); border: 1px solid var(--line); cursor: pointer;
  background: color-mix(in srgb, var(--text) 6%, var(--card)); color: var(--text); font: inherit; font-weight: 600;
}
.chat-retry[hidden] { display: none; }
/* Lost the connection while reading: a banner over the conversation, which stays readable */
.chat-state[data-state="offline"] {
  inset: var(--space-2) var(--space-2) auto; flex-direction: row; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border-radius: calc(var(--r-sm) + var(--space-1));   /* concentric with the button inside */ text-align: start; color: var(--text);
  background: color-mix(in srgb, var(--danger) 16%, var(--card)); box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.chat-state[data-state="offline"] p { max-width: none; }
.chat-state[data-state="offline"] .chat-retry { min-height: 36px; padding: 0 var(--space-3); flex: none; }
.chat-member {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-3) var(--space-4); font-size: var(--fs-label); color: var(--muted); text-align: center; border-top: 1px solid var(--line);
}
/* Typing on a phone (keyboard up): the mini player and tab bar step aside so the chat and the form get the
   room. They come back when the keyboard closes */
@media (pointer: coarse) {
  body[data-view="chat"]:has(#chat-wrap :is(input, textarea):focus) :is(.mini, .tabbar) { display: none; }
}
/* Short screens with the form in use: the "own XMPP app" aside waits until the keyboard is down */
@media (max-height: 560px) {
  #chat-login:focus-within .chat-login-elsewhere { display: none; }
}
.chat-member p { margin: 0; }
#chat-guest { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .5em; }   /* wraps as two centred lines, no dangling separator */
#chat-guest[hidden] { display: none; }
#chat-guest .link { padding: var(--space-3) var(--space-1); margin-block: calc(-1 * var(--space-2)); }   /* a 44px target that doesn't make the bar taller */
/* Guests get the friendly note below instead of Converse's "You're not allowed to send messages in this room" */
#chat-wrap.is-guest .muc-bottom-panel--muted { display: none; }
.link { background: none; border: 0; padding: 6px; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; }
.link:disabled { opacity: .5; cursor: default; }

/* Log in: labelled fields, a way back to reading, and a word on who can talk */
#chat-login { display: grid; gap: var(--space-1); max-width: 420px; margin: 0 auto; text-align: start; }
#chat-login[hidden], #chat-who[hidden] { display: none; }
#chat-login .chat-login-intro { margin-bottom: var(--space-2); font-size: var(--fs-meta); text-wrap: pretty; }
/* Username and password share one box, split by a hairline; the whole field is the tap target */
.chat-fields { display: grid; margin-bottom: var(--space-2); border: 1px solid var(--muted); border-radius: var(--r-sm); }
.chat-field { position: relative; display: grid; padding: var(--space-1) var(--space-3) 0; cursor: text; }
.chat-field + .chat-field { border-top: 1px solid var(--line); }
.chat-field:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.chat-field:last-child { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.chat-field:focus-within { outline: 2px solid var(--accent-text); outline-offset: -1px; z-index: 1; }
#chat-login label { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); line-height: 1.5; cursor: text; }
.chat-field:focus-within label { color: var(--accent-text); }
#chat-login input {
  width: 100%; min-width: 0; height: 30px; padding: 0 0 var(--space-1); border: 0; outline: none;
  font-size: var(--fs-body); background: transparent; color: var(--text);
}
.chat-user-field { display: flex; align-items: center; }
#chat-login .chat-user-field input { flex: 1; }
.chat-user-field > span { padding-bottom: var(--space-1); font-size: var(--fs-body); color: var(--muted); white-space: nowrap; }
.chat-login-actions { display: flex; align-items: center; gap: var(--space-2); }
.chat-login-actions .link { min-height: var(--tap); padding: 0 var(--space-3); }
#chat-submit { flex: 1; min-height: var(--tap); padding: 0 var(--space-4); border: 0; border-radius: var(--r-sm); background: var(--accent-strong); color: #fff; font-size: var(--fs-body); font-weight: 600; cursor: pointer; }
#chat-submit:disabled { opacity: .75; cursor: progress; }
.chat-fields:has(input[aria-invalid]) { border-color: var(--danger); }
#chat-login .chat-login-error { margin: calc(-1 * var(--space-1)) 0 var(--space-2); color: var(--danger); font-weight: 600; }
#chat-login .chat-login-error:empty { display: none; }
.chat-login-elsewhere { margin-top: var(--space-1); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.chat-login-elsewhere summary { width: fit-content; padding: var(--space-3) 0; margin-bottom: calc(-1 * var(--space-2)); cursor: pointer; color: var(--muted); }
.chat-login-elsewhere p { margin: 0 0 var(--space-1); }
@media (hover: hover) {
  .mini .play-btn:hover, #chat-submit:hover:not(:disabled), #chat-wrap .send-button:hover { filter: brightness(1.1); }
  .link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
  .chat-retry:hover { background: color-mix(in srgb, var(--text) 12%, var(--card)); }
}
.chat-member .chat-error { color: var(--danger); font-weight: 600; margin-top: var(--space-2); }
.chat-error:empty { display: none; }

/* Converse.js in the page's colors and fonts (it would otherwise use its own theme) */
#chat-wrap converse-root.conversejs {
  --background: var(--card); --foreground: var(--text); --text-color: var(--text);
  --message-text-color: var(--text); --message-author-color: var(--text);
  --subdued-color: var(--muted); --comment: var(--muted); --gray-color: var(--muted); --chat-info-color: var(--muted);
  --muc-color: var(--accent-text); --chat-color: var(--accent-text); --link-color: var(--accent-text); --chatroom-head-description-link-color: var(--accent-text);
  --chatroom-head-bg-color: var(--card); --chatroom-head-color: var(--text); --chatroom-head-fg-color: var(--text);
  --chatroom-head-border-bottom: 1px solid var(--line); --chatroom-separator-border-bottom: 1px solid var(--line);
  --chatroom-message-input-border-top: 1px solid var(--line); --occupants-border-left: 1px solid var(--line);
  --chat-background-color: var(--card); --chat-content-background-color: var(--card); --global-background-color: var(--card);
  --chat-textarea-background-color: var(--bg); --chat-textarea-color: var(--text); --chat-textarea-disabled-bg-color: var(--card);
  --chat-msg-hover-color: transparent; --focus-color: var(--accent-text); --chat-toolbar-btn-color: var(--accent); --muc-toolbar-btn-color: var(--accent); --text-color-lighten-15-percent: var(--muted);
  --normal-font: var(--font-ui); --heading-font: var(--font-ui);
  --font-size: var(--fs-body); --message-font-size: var(--fs-body);
}
/* On phones Converse sizes its chat box to the whole screen (100vw, !important); keep it inside the card */
#chat-wrap .chatbox .box-flyout { width: 100% !important; height: 100% !important; }
#chat-wrap .chatbox { margin: 0; }   /* on wide screens Converse pulls the room 15px left (a grid gutter) */
#chat-wrap .chatbox-title__text { font-size: var(--fs-body); font-weight: 700; }
#chat-wrap .date-separator .separator-text { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); }   /* a quiet marker, not a heading */
#chat-wrap .chat-textarea { font-size: var(--fs-body); }   /* 16px or more, or iPhones zoom in on focus */
#chat-wrap .muc-bottom-panel { color: var(--muted); font-size: var(--fs-label); padding: var(--space-3); text-align: center; }

/* Message bubbles: others on the left, yours on the right in the deeper accent (white text passes 4.5:1 on it) */
#chat-wrap .message.chat-msg { padding: 2px 12px; }
#chat-wrap .message.chat-msg:not(.chat-msg--followup) { margin-top: var(--space-2); }
#chat-wrap .message.chat-msg .chat-msg__content,
#chat-wrap .message.chat-msg.chat-msg--followup .chat-msg__content {
  width: auto; max-width: min(82%, 520px); margin-left: 0;
  padding: var(--space-2) var(--space-3); border-radius: var(--r-bubble); background: var(--bubble-them);
}
#chat-wrap .message.chat-msg .chat-msg__content--them { border-top-left-radius: var(--r-tail); }
#chat-wrap .message.chat-msg.chat-msg--followup .chat-msg__content--them { border-top-left-radius: var(--r-bubble); border-bottom-left-radius: var(--r-tail); }
#chat-wrap .message.chat-msg:has(.chat-msg__content--me) { justify-content: flex-end; }
#chat-wrap .message.chat-msg .chat-msg__content--me,
#chat-wrap .message.chat-msg.chat-msg--followup .chat-msg__content--me { margin-left: auto; background: var(--bubble-me); border-top-right-radius: var(--r-tail); }
#chat-wrap .message.chat-msg.chat-msg--followup .chat-msg__content--me { border-top-right-radius: var(--r-bubble); border-bottom-right-radius: var(--r-tail); }
#chat-wrap .chat-msg__content--me,
#chat-wrap .chat-msg__content--me .chat-msg__text,
#chat-wrap .chat-msg__content--me .chat-msg__body--groupchat.chat-msg__body--received .chat-msg__text { color: #fff; }
#chat-wrap .chat-msg__content--me .chat-msg__body--groupchat:not(.chat-msg__body--received) { opacity: .7; }   /* still sending */
#chat-wrap .chat-msg__content--me .chat-msg__author { display: none; }   /* it's you */
#chat-wrap .chat-msg__content--me .chat-msg__time { color: #fff; padding-left: 0; }
#chat-wrap .chat-msg__content--me .chat-msg__heading { text-align: right; }
#chat-wrap .chat-msg__heading { display: flex; align-items: baseline; gap: 6px; padding-right: 0; line-height: 1.3; margin-bottom: 1px; }
#chat-wrap .chat-msg__content--me .chat-msg__heading { justify-content: flex-end; }
#chat-wrap .chat-msg__author a { color: var(--accent-text); font-weight: 600; font-size: var(--fs-label); }
#chat-wrap .chat-msg__time { font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
#chat-wrap .chat-msg__content--them .chat-msg__time { color: color-mix(in srgb, var(--text) 68%, var(--bubble-them)); }   /* --muted is 4.4:1 on the bubble */
#chat-wrap .chat-msg__message { line-height: 1.4; }
#chat-wrap .chat-msg__content--me converse-message-actions { color: #fff; }
#chat-wrap .send-button {
  width: 36px; height: 36px; margin: 3px 8px 3px 0; padding: 0; border: 0; border-radius: 50%;
  background-color: var(--accent-strong); color: #fff; display: grid; place-items: center;
}
#chat-wrap .send-button converse-icon { fill: #fff; color: #fff; }