/* =============================================================================
   Xide — app theme on top of Converse.js
   Concept: dark first. Black and graphite surfaces, one signal orange for the
   mark, primary actions and your own messages. Text on orange is black.
   Brand colours live in the two token blocks below — change them there only.
   ========================================================================== */

/* ---- Tokens: dark (default) --------------------------------------------- */
.conversejs[data-converse-theme="xide-dark"],
converse-bg[data-converse-theme="xide-dark"],
body.app {
  --paper: #000000;
  --surface: #161616;
  --surface-2: #222222;
  --ink: #f2f2f2;
  --ink-soft: #a3a3a3;
  --ink-faint: #707070;
  --line: #2c2c2c;
  --accent: #ff6600;
  --accent-deep: #ff7f2a;
  --accent-tint: #2a1608;
  --on-accent: #000000;
  --bubble-them: #1c1c1c;
  --bubble-me: var(--accent);
  --ok: #4fbf7f;
  --warn: #f0a640;
  --danger: #ff5a4f;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 35%);
}

/* ---- Tokens: light ------------------------------------------------------- */
.conversejs[data-converse-theme="xide"],
converse-bg[data-converse-theme="xide"],
html[data-appearance="light"] body.app {
  --paper: #ededed;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --ink: #121212;
  --ink-soft: #525252;
  --ink-faint: #8a8a8a;
  --line: #dadada;
  --accent: #f26822;
  --accent-deep: #d9530d;
  --accent-tint: #ffe8da;
  --on-accent: #000000;
  --bubble-them: #ffffff;
  --bubble-me: var(--accent);
  --ok: #2f7a55;
  --warn: #a8661b;
  --danger: #c4261d;
  --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 16px rgb(0 0 0 / 6%);
}
@media (prefers-color-scheme: light) {
  html[data-appearance="system"] body.app { --paper: #ededed; --accent: #f26822; }
}

/* ---- Map tokens onto Converse's variables -------------------------------- */
.conversejs[data-converse-theme="xide"],
.conversejs[data-converse-theme="xide-dark"],
converse-bg[data-converse-theme="xide"],
converse-bg[data-converse-theme="xide-dark"] {
  --normal-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font: var(--normal-font);
  --branding-font: var(--normal-font);
  --font-size-small: 13px;
  --font-size: 15px;
  --font-size-large: 16px;
  --font-size-huge: 20px;
  --message-font-size: 15px;
  --line-height: 20px;
  --line-height-large: 22px;

  --avatar-border-radius: 50%;
  --message-avatar-width: 32px;
  --message-avatar-height: 32px;
  --controlbox-width: 320px;
  --button-border-radius: 10px;
  --chatbox-border-radius: 0;
  --chat-separator-border-bottom: 1px solid var(--line);

  --foreground-color: var(--ink);
  --background-color: var(--paper);
  --global-background-color: var(--paper);
  --text-color: var(--ink);
  --message-text-color: var(--ink);
  --subdued-color: var(--ink-faint);
  --heading-color: var(--ink);
  --brand-heading-color: var(--ink);
  --link-color: var(--accent);
  --link-color-hover: var(--accent-deep);
  --highlight-color: var(--accent-tint);
  --highlight-color-hover: var(--accent-tint);
  --focus-color: var(--accent);
  --selection-color: var(--accent-tint);
  --disabled-color: var(--ink-faint);
  --error-color: var(--danger);

  --primary-color: var(--accent) !important;
  --primary-color-hover: var(--accent-deep) !important;
  --secondary-color: var(--ink-soft) !important;
  --secondary-color-hover: var(--line);
  --success-color: var(--ok);
  --danger-color: var(--danger);
  --warning-color: var(--warn);
  --info-color: var(--ink-soft);

  --chat-color: var(--accent);
  --chat-color-hover: var(--accent-deep);
  --muc-color: var(--accent);
  --muc-color-hover: var(--accent-deep);
  --headlines-color: var(--ink-soft);
  --controlbox-color: var(--ink);
  --chat-header-fg-color: var(--ink);
  --chat-header-bg-color: var(--surface);
  --muc-header-fg-color: var(--ink);
  --muc-header-bg-color: var(--surface);

  --chat-status-online: var(--ok);
  --chat-status-away: var(--warn);
  --chat-status-busy: var(--danger);
  --chat-status-offline: var(--ink-faint);

  --converse-body-bg: var(--paper);
  --converse-body-color: var(--ink) !important;
  --converse-border-color: var(--line);
  --converse-link-color: var(--accent) !important;
  --converse-link-hover-color: var(--accent-deep) !important;
  --converse-highlight-color: var(--accent);
  --converse-success: var(--ok);
  --converse-danger: var(--danger);
  --converse-info: var(--ink-soft);
  --converse-modal-color: var(--ink) !important;
  --converse-toast-bg: var(--ink) !important;
  --converse-toast-color: var(--surface);
  --converse-popover-header-bg: var(--surface-2) !important;
  --converse-popover-header-color: var(--ink) !important;
  --converse-secondary-bg: var(--surface-2);
  --converse-tertiary-bg: var(--surface-2);
  --converse-emphasis-color: var(--ink);
  --converse-secondary-color: var(--ink-soft);
}

/* ---- Base ---------------------------------------------------------------- */
html, body.app { background: var(--paper); margin: 0; }
.conversejs, .conversejs * { font-family: var(--normal-font); }
.conversejs { color: var(--ink); -webkit-font-smoothing: antialiased; }
.conversejs ::selection { background: var(--accent-tint); }
.conversejs a { text-decoration: none; }
.conversejs :focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}
.conversejs .form-control:focus-visible,
.conversejs .chat-textarea:focus-visible,
.conversejs input:focus-visible,
.conversejs textarea:focus-visible { outline: none !important; }
.conversejs converse-icon svg { fill: currentColor; }
.conversejs converse-dropdown .dropdown-toggle converse-icon svg,
.conversejs .chat-toolbar converse-icon svg,
.conversejs .chat-msg__receipt svg,
.conversejs .controlbox-heading converse-icon svg,
.conversejs .list-toggle converse-icon svg,
.conversejs .chat-head converse-icon svg { fill: currentColor !important; }
#conversejs converse-dropdown .dropdown-toggle svg,
#conversejs .chat-toolbar svg,
#conversejs .chat-head svg { fill: var(--ink-soft) !important; }
#conversejs .chat-toolbar .toggle-omemo svg { fill: var(--accent) !important; }
#conversejs #converse-roster converse-dropdown converse-icon svg,
#conversejs #converse-roster .roster-contacts converse-roster-contact .contact-actions converse-icon svg { fill: var(--ink-soft) !important; }
#conversejs .send-button svg { fill: var(--on-accent) !important; }
#conversejs .chat-msg__content--me .chat-msg__receipt svg { fill: var(--on-accent) !important; opacity: .8; }

/* Encryption is always on: the trust checkbox would only let people turn it off */
.conversejs .login-trusted { display: none !important; }

/* ---- Buttons & forms ----------------------------------------------------- */
.conversejs .btn { border-radius: var(--button-border-radius); font-weight: 600; }
.conversejs .btn-primary,
.conversejs input[type="submit"].btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
.conversejs .btn-primary:hover { background: var(--accent-deep) !important; border-color: var(--accent-deep) !important; }
.conversejs .btn-secondary {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.conversejs .form-control,
.conversejs .form-select,
.conversejs .input-group-text {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
}
.conversejs .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.conversejs .form-control::placeholder { color: var(--ink-faint); }
.conversejs .form-label { font-weight: 600; font-size: 14px; color: var(--ink); }
.conversejs .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ---- Sign-in / sign-up --------------------------------------------------- */
#conversejs #controlbox.logged-out,
#conversejs #controlbox.logged-out .box-flyout,
#conversejs #controlbox.logged-out .flyout { background: var(--paper) !important; }
#conversejs #controlbox.logged-out .controlbox-pane {
  padding: clamp(40px, 11vh, 110px) 20px 32px !important;
}
#conversejs #controlbox.logged-out converse-brand-logo {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
.conversejs converse-controlbox.logged-out .form-control { background: var(--surface); }
.conversejs converse-controlbox.logged-out converse-controlbox-buttons { display: none; }
.conversejs label[for="converse-login-jid"] { font-size: 0 !important; }
.conversejs label[for="converse-login-jid"]::before { content: "Username"; font-size: 14px; }
.conversejs converse-controlbox.logged-out .controlbox-pane {
  max-width: 380px;
  margin: 0 auto;
  min-height: calc(var(--vh, 1vh) * 100);
  padding: clamp(40px, 11vh, 110px) 20px 32px;
  justify-content: flex-start !important;
  gap: 0;
  background: transparent !important;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 36px;
}
.brand__mark {
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  animation: mark-in 900ms cubic-bezier(.2, .9, .25, 1.15) both;
}
@keyframes mark-in {
  0%   { transform: scale(.7) rotate(-90deg); opacity: 0; }
  60%  { transform: scale(1.04) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.brand__name {
  margin: 0;
  font-size: 52px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.brand__line {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.conversejs converse-controlbox.logged-out .controlbox-pane { align-items: stretch !important; }
.conversejs converse-controlbox.logged-out converse-brand-logo { display: block; width: 100%; }
.conversejs converse-login-form,
.conversejs converse-registration-form,
.conversejs #converse-login,
.conversejs #converse-register {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.conversejs converse-login-form .input-group .form-control { border-right: 0; border-radius: 12px 0 0 12px; }
.conversejs converse-login-form .input-group-text {
  border-radius: 0 12px 12px 0;
  color: var(--ink-faint);
  background: var(--surface-2);
}
.conversejs converse-login-form .form-control,
.conversejs converse-registration-form .form-control { height: 48px; }
.conversejs converse-login-form .form-label::after { content: none; }
.conversejs #converse-login .text-center { text-align: left !important; }
.conversejs #converse-login button[type="submit"],
.conversejs converse-registration-form [type="submit"] {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  padding: 0 !important;
  font-size: 16px;
}
.conversejs .switch-form {
  display: flex;
  gap: 6px;
  align-items: baseline;
  justify-content: flex-start;
  margin-top: 28px !important;
  color: var(--ink-soft);
  font-size: 15px;
}
.conversejs .switch-form p { margin: 0 !important; }
.conversejs .switch-form a { color: var(--accent); font-weight: 600; }
.app-footer {
  margin-top: 0;
  padding-top: 44px;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.5;
}
.app-footer p { margin: 0; max-width: 34ch; text-align: left; }
.conversejs converse-registration-form legend,
.conversejs converse-registration-form .title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.conversejs .conn-feedback { border-radius: 12px; }

/* ---- Sidebar (contacts & groups) ------------------------------------------ */
.conversejs #controlbox:not(.logged-out) {
  background: var(--surface) !important;
  border-right: 1px solid var(--line);
}
.conversejs #controlbox .box-flyout { background: var(--surface) !important; }
.conversejs #controlbox .controlbox-pane { background: transparent !important; }
.conversejs converse-user-profile .userinfo {
  padding: 16px 16px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: 0 !important;
}
#conversejs #controlbox converse-user-profile { border: 0 !important; }
#conversejs #controlbox converse-user-profile + .controlbox-pane { border-top: 0 !important; }
.conversejs converse-user-profile .profile { border: 0 !important; padding: 0 !important; align-items: center; }
.conversejs converse-user-profile .show-profile { display: flex; align-items: center; min-width: 0; }
.conversejs converse-user-profile .username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.conversejs converse-user-profile .username {
  font-weight: 650;
  font-size: 16px;
  color: var(--ink);
  margin-left: 10px;
}
.conversejs converse-user-profile .xmpp-status { padding-left: 52px; margin-top: -10px; }
.conversejs converse-user-profile .show-profile converse-avatar { flex: 0 0 auto; }
.conversejs .xmpp-status__msg { font-size: 13px; color: var(--ink-soft); }
.conversejs .controlbox-heading {
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  color: var(--ink-soft) !important;
}
#conversejs #controlbox .controlbox-heading,
#conversejs #controlbox .controlbox-heading a,
#conversejs #controlbox .list-toggle,
#conversejs #controlbox .group-toggle,
#conversejs #controlbox .controlbox-heading converse-icon,
#conversejs #controlbox .group-toggle converse-icon { color: var(--ink-soft) !important; }
#conversejs #controlbox .group-toggle { color: var(--ink-faint) !important; }
.conversejs #controlbox converse-dropdown .dropdown-toggle converse-icon,
.conversejs .chat-head converse-dropdown .dropdown-toggle converse-icon,
.conversejs converse-muc-sidebar converse-dropdown .dropdown-toggle converse-icon { color: var(--ink-soft) !important; }
.conversejs converse-dropdown .dropdown-toggle converse-icon svg,
.conversejs .controlbox-heading converse-icon svg,
.conversejs .group-toggle converse-icon svg { fill: currentColor !important; }
.conversejs .controlbox-section .d-flex.controlbox-padded { padding-top: 18px; padding-bottom: 6px; align-items: center; }
.conversejs .group-toggle { color: var(--ink-faint) !important; font-size: 12px; font-weight: 600; }
.conversejs .list-item,
.conversejs .items-list .list-item {
  border-radius: 10px;
  margin: 1px 8px;
  padding: 7px 8px !important;
  min-height: 44px;
  align-items: center;
}
.conversejs .list-item:hover { background: var(--surface-2) !important; }
.conversejs .list-item.open,
.conversejs .list-item.open:hover {
  background: var(--accent-tint) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
.conversejs .list-item a,
.conversejs .list-item .contact-name,
.conversejs .open-room { color: var(--ink) !important; font-size: 15px; }
.conversejs .list-item .avatar,
.conversejs .list-item converse-avatar { margin-right: 4px; }
.conversejs .unread-msgs { font-weight: 700; }
.conversejs .msgs-indicator,
.conversejs .badge.badge-primary {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-radius: 999px;
}

/* Avatars: round, our font, softer generated colours */
.conversejs converse-avatar .avatar-initials {
  border-radius: 50% !important;
  font-family: var(--normal-font) !important;
  font-weight: 650 !important;
  filter: grayscale(1) brightness(.78) contrast(1.1);   /* neutral graphite avatars; orange stays for actions */
}
.conversejs converse-avatar img,
.conversejs converse-avatar svg { border-radius: 50% !important; }
.conversejs .chat-status--avatar { stroke: var(--surface); }

/* Menus */
.conversejs .dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
}
.conversejs .dropdown-item {
  border-radius: 8px;
  color: var(--ink) !important;
  font-size: 14px;
  padding: 8px 10px;
}
.conversejs .dropdown-item:hover { background: var(--surface-2); }
.conversejs .btn--transparent converse-icon,
.conversejs .chatbox-btn converse-icon { color: var(--ink-soft) !important; }

/* ---- Chat header --------------------------------------------------------- */
.conversejs .chat-head {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  min-height: 64px;
  padding: 0 16px !important;
  box-shadow: none !important;
}
.conversejs .chat-head .chatbox-title__text,
.conversejs .chat-head .chatbox-title__text a {
  color: var(--ink) !important;
  font-size: 17px !important;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.conversejs .chat-head .chatbox-title,
.conversejs .chat-head .chatbox-title--row { align-items: center !important; min-height: 64px; }
.conversejs .chat-head converse-avatar { margin-right: 10px; }
.conversejs .chat-head .chat-head__desc { color: var(--ink-soft); font-size: 13px; }
.conversejs .chat-head converse-icon { color: var(--ink-soft) !important; }

/* ---- Messages ------------------------------------------------------------ */
.conversejs .chat-body,
.conversejs .chat-content,
.conversejs converse-chat .chat-body,
.conversejs converse-muc .chat-body { background: var(--paper) !important; }
.conversejs .chat-content__messages { padding: 12px 20px 8px; }

.conversejs .date-separator {
  display: flex;
  justify-content: center;
  margin: 18px 0 10px;
}
.conversejs .date-separator .separator { display: none; }
.conversejs .date-separator .separator-text {
  position: static;
  background: var(--surface) !important;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.conversejs .chat-msg {
  padding: 3px 0 !important;
  align-items: flex-end;
}
.conversejs .chat-msg--followup { padding-top: 1px !important; }
.conversejs .chat-msg__content {
  width: auto !important;
  max-width: min(72%, 640px);
  flex: 0 1 auto !important;
}
.conversejs .chat-msg__body { width: auto !important; }
.conversejs .chat-msg__heading { margin-bottom: 3px; gap: 6px; }
.conversejs .chat-msg__author,
.conversejs .chat-msg__author a {
  color: var(--ink) !important;
  font-weight: 650;
  font-size: 13px;
}
.conversejs .chat-msg__time { color: var(--ink-faint) !important; font-size: 12px; }

/* bubble */
.conversejs .chat-msg__body .chat-msg__message {
  background: var(--bubble-them);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px;
  padding: 8px 12px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 3%);
  width: fit-content !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
}
.conversejs .chat-msg__text {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
}
.conversejs .chat-msg__receipt { color: var(--ink-faint) !important; margin-left: 6px; }

/* your own messages: right side, accent colour */
.conversejs .chat-msg:has(.chat-msg__content--me) { flex-direction: row-reverse; }
.conversejs .chat-msg:has(.chat-msg__content--me) > .show-msg-author-modal,
.conversejs .chat-msg:has(.chat-msg__content--me) > converse-avatar { display: none !important; }
.conversejs .chat-msg__content--me { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.conversejs .chat-msg__content--me .chat-msg__heading { justify-content: flex-end; }
.conversejs .chat-msg__content--me .chat-msg__author { display: none !important; }
.conversejs .chat-msg__content--me .chat-msg__body { display: flex; justify-content: flex-end; }
.conversejs .chat-msg__content--me .chat-msg__message {
  background: var(--bubble-me);
  border-color: transparent;
  border-radius: 18px 18px 6px 18px;
}
.conversejs .chat-msg__content--me .chat-msg__text,
.conversejs .chat-msg__content--me .chat-msg__text a,
.conversejs .chat-msg__content--me .chat-msg__receipt { color: var(--on-accent) !important; }
.conversejs .chat-msg__content--me .chat-msg__text a { text-decoration: underline; }
.conversejs .chat-msg__content--me converse-message-actions { order: -1; }

/* time under the bubble in 1:1 chats */
.conversejs converse-chat .chat-msg__content { display: flex !important; flex-direction: column; }
.conversejs converse-chat .chat-msg__heading { order: 2; margin: 3px 4px 2px; }
.conversejs converse-chat .chat-msg--followup .chat-msg__heading { display: none; }
.conversejs .chat-msg__content--them .chat-msg__receipt { display: none !important; }

/* collapse a run of "can't show" lines into one */
.conversejs converse-chat-message:has(.chat-error) + converse-chat-message:has(.chat-error) { display: none; }

/* 1:1 chats: no names or avatars — it's just the two of you */
.conversejs converse-chat .chat-msg__author { display: none !important; }
.conversejs converse-chat .chat-msg > .show-msg-author-modal { display: none !important; }
.conversejs converse-chat .chat-msg__heading { min-height: 0; }

/* lock shown on encrypted messages */
.conversejs .chat-msg__heading converse-icon.fa-lock,
.conversejs .chat-msg__heading .fa-lock { color: var(--accent) !important; opacity: .85; }

/* media */
.conversejs .chat-msg__media img,
.conversejs .chat-image,
.conversejs converse-image img {
  border-radius: 14px;
  max-width: min(320px, 100%);
  border: 1px solid var(--line);
}

/* message menu: only show on hover / focus */
.conversejs .chat-msg converse-message-actions { opacity: 0; transition: opacity 120ms; }
.conversejs .chat-msg:hover converse-message-actions,
.conversejs .chat-msg:focus-within converse-message-actions { opacity: 1; }

/* Messages from before this device existed can't be decrypted (by design).
   Hide the protocol fallback text and keep one quiet line. */
.conversejs .chat-error converse-texture[text^="This is an OMEMO encrypted message"] { display: none; }
.conversejs .chat-info.chat-error {
  color: var(--ink-faint) !important;
  font-size: 13px;
  font-style: italic;
  padding: 2px 0;
}
.conversejs .chat-info.chat-error q.reason { quotes: none; color: var(--ink-faint); }
.conversejs .chat-info.chat-error q.reason::before { content: "🔒  "; font-style: normal; }

/* info lines (joins, leaves, notices) */
.conversejs .chat-info,
.conversejs .chat-info__message { color: var(--ink-faint) !important; font-size: 13px; }

/* ---- Composer ------------------------------------------------------------ */
.conversejs .bottom-panel,
.conversejs .chat-message-form {
  background: var(--surface) !important;
  border-top: 1px solid var(--line);
}
.conversejs converse-chat-bottom-panel,
.conversejs .bottom-panel { height: auto !important; flex: 0 0 auto; border-top: 1px solid var(--line) !important; }
.conversejs .chat-body { display: flex !important; flex-direction: column; }
.conversejs .chat-body > .chat-content,
.conversejs .chat-body .chat-content { flex: 1 1 auto; height: auto !important; min-height: 0; }
.conversejs .chat-message-form {
  height: auto !important;
  padding: 8px 16px 14px;
  box-sizing: border-box;
  width: 100%;
  border-top: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas: "tools tools" "text send";
  column-gap: 8px;
  align-items: end;
}
.conversejs .chat-message-form converse-chat-toolbar { display: contents !important; }
.conversejs .chat-message-form .toolbar-buttons {
  grid-area: tools;
  margin-bottom: 6px;
  display: flex !important;
  gap: 2px;
  justify-content: flex-start !important;
  width: auto !important;
}
.conversejs .chat-message-form .toolbar-buttons > * { flex: 0 0 auto !important; }
.conversejs .chat-message-form .toolbar-buttons .btn {
  opacity: 1 !important;
  width: 36px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.conversejs .chat-message-form .toolbar-buttons .btn:hover { background: var(--surface-2); }
.conversejs .chat-message-form .chat-textarea { width: 100% !important; min-width: 0; box-sizing: border-box; }
.conversejs .chat-message-form > .chat-textarea,
.conversejs .chat-message-form > .suggestion-box { grid-area: text; min-width: 0; }
.conversejs .chat-message-form .chat-textarea { min-height: 46px; height: 46px; display: block; }
.conversejs .chat-message-form .chat-toolbar > :not(.toolbar-buttons) { grid-area: send; }
.conversejs .chat-message-form .send-button { width: 46px !important; height: 46px !important; margin: 0 !important; }
.conversejs .chat-message-form .spoiler-hint { grid-area: text; }
.conversejs converse-location-button { display: none !important; }
.conversejs .chat-toolbar { border: 0 !important; padding: 0 0 6px !important; background: transparent !important; }
.conversejs .chat-toolbar .btn converse-icon,
.conversejs .chat-toolbar converse-icon { color: var(--ink-soft) !important; }
.conversejs .chat-toolbar .toggle-omemo converse-icon { color: var(--accent) !important; }
.conversejs .chat-textarea:not(:focus) { border-color: var(--line) !important; }
.conversejs .chat-textarea {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}
.conversejs .chat-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}
.conversejs .send-button {
  background: var(--accent) !important;
  border-radius: 999px !important;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
}
.conversejs .send-button converse-icon { color: var(--on-accent) !important; }

/* ---- Groups: participant list ---------------------------------------------- */
.conversejs converse-muc-sidebar,
.conversejs .occupants {
  background: var(--surface) !important;
  border-left: 1px solid var(--line) !important;
  min-width: 200px;
}
.conversejs converse-muc .chat-body,
.conversejs converse-muc .chat-area { border: 0 !important; }
.conversejs .occupants-heading { font-size: 13px; font-weight: 650; color: var(--ink-soft); }
.conversejs .occupant-nick { color: var(--ink) !important; font-size: 14px; }
.conversejs .occupant .badge { display: none !important; }   /* cryptic O / MO role letters */
.conversejs .occupant-nick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversejs .occupants-heading,
.conversejs converse-muc-sidebar .occupants-heading { color: var(--ink-soft) !important; }

/* ---- Modals --------------------------------------------------------------- */
.conversejs .modal-content {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.conversejs .modal-header { border-bottom: 1px solid var(--line); }
.conversejs .modal-footer { border-top: 1px solid var(--line); }
.conversejs .modal-title { font-weight: 700; letter-spacing: -0.01em; }
.conversejs .modal-backdrop.show { opacity: .4; }

/* ---- Phones ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .conversejs .chat-msg__content { max-width: 82%; }
  .conversejs .chat-content__messages { padding: 8px 12px; }
  .brand__name { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand__mark { animation: none; }
  .conversejs * { transition: none !important; }
}

/* ---- Specificity overrides for Converse's own accent borders --------------- */
#conversejs .chat-message-form,
#conversejs converse-muc .chat-message-form,
#conversejs .chatroom .chat-message-form { border-top: 0 !important; }
#conversejs .chat-head,
#conversejs .chat-head-chatroom,
#conversejs .chat-head-chatbox { border-bottom: 1px solid var(--line) !important; }
#conversejs converse-muc-sidebar,
#conversejs .occupants { border-left: 1px solid var(--line) !important; }
#conversejs .dragresize { display: none !important; }
#conversejs .modal-header,
#conversejs .modal-header .modal-title { background: var(--surface) !important; color: var(--ink) !important; }
#conversejs .modal-header { border-radius: 18px 18px 0 0; }
#conversejs .modal-header svg { fill: var(--ink-soft) !important; }

/* ---- Sign-up form (fields come from the server) ---------------------------- */
#conversejs #converse-register legend,
#conversejs #converse-register .title { display: none !important; }
#conversejs #converse-register::before {
  content: "Create your account";
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  color: var(--ink);
}
#conversejs #converse-register .instructions { color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; }
#conversejs #converse-register label { text-transform: capitalize; }
#conversejs #converse-register .buttons { width: 100%; }
#conversejs #converse-register input[type="submit"] { width: 100%; height: 48px; font-size: 16px; }
#conversejs #converse-register .form-control { height: 48px; }
#conversejs #converse-register .input-group .form-control { border-right: 0; border-radius: 12px 0 0 12px; }
#conversejs #converse-register .input-group-text { border-radius: 0 12px 12px 0; color: var(--ink-faint); background: var(--surface-2); }
#conversejs converse-split-resize { background: var(--line) !important; width: 1px !important; opacity: 1; }
#conversejs converse-split-resize:hover { background: var(--accent) !important; width: 3px !important; }

/* photos and files: no bubble around them */
.conversejs .chat-msg__message:has(.chat-image, converse-image, .chat-msg__media img, img.chat-image) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.conversejs .chat-msg__message:has(.chat-image, converse-image) .chat-msg__receipt { display: none !important; }
.conversejs .chat-image,
.conversejs converse-image img { box-shadow: var(--shadow); }
#conversejs .chat-msg__author,
#conversejs .chat-msg__author a { color: var(--ink) !important; }
#conversejs .chat-msg.mentioned { background: transparent !important; }
#conversejs .chat-msg.mentioned .chat-msg__content--them .chat-msg__message { border-color: var(--accent); }

/* ---- Appearance switch (system / light / dark) ------------------------------ */
.conversejs[data-converse-theme="xide"] { color-scheme: light; }
.conversejs[data-converse-theme="xide-dark"] { color-scheme: dark; }

app-appearance { display: block; }
.appearance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.appearance__label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.appearance__seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.appearance__seg button {
  width: 34px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0;
}
.appearance__seg button svg { width: 16px; height: 16px; }
.appearance__seg button:hover { color: var(--ink); }
.appearance__seg button[aria-checked="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}
.appearance__seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* sign-in page: sits under the footer note */
.app-footer app-appearance { margin-top: 20px; max-width: 260px; }

/* sidebar: pinned to the bottom of the contact list */
#conversejs #controlbox:not(.logged-out) .controlbox-pane { padding-bottom: 64px !important; }
#conversejs #controlbox .sidebar-appearance {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: 2;
}
#conversejs #controlbox.logged-out .sidebar-appearance { display: none; }

/* sign-in page scrolls on short screens so nothing ends up out of reach */
#conversejs #controlbox.logged-out .box-flyout {
  overflow-y: auto !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  -webkit-overflow-scrolling: touch;
}
#conversejs #controlbox.logged-out .controlbox-pane { min-height: 100%; height: auto !important; overflow: visible !important; }
@media (max-height: 760px), (max-width: 480px) {
  #conversejs #controlbox.logged-out .controlbox-pane { padding-top: 32px !important; }
  .brand { margin-bottom: 24px; }
  .brand__mark { width: 60px; height: 60px; margin-bottom: 16px; }
  .app-footer { padding-top: 28px; }
}
/* Converse hides its footer on phones; ours holds the encryption note and the switch */
#conversejs #controlbox.logged-out converse-footer { display: block !important; }

.brand__home { display: inline-block; border-radius: 16px; }

/* "This photo or file has expired": expected, not an error, so keep it quiet */
#conversejs .chat-msg__text p.error,
#conversejs converse-chat-message-body p.error {
  color: var(--ink-soft) !important;
  font-style: italic;
  margin: 0;
}