/* OpenIM colours for Converse.js, loaded after converse.min.css.
   Converse keeps its own light ("classic") and dark ("dracula") themes; this
   only swaps their palette for the one on openim.nl (templates/style.css).
   The !important ones override declarations Converse marks !important. */

/* ── Light: cream, ink and deep green ── */
.conversejs[data-converse-theme=classic],
converse-bg[data-converse-theme=classic] {
  --blue: #157a5d;
  --blue-rgb: 21, 122, 93;
  --dark-blue: #0f3c30;
  --light-blue: #1b9e78;
  --light-blue-rgb: 27, 158, 120;
  --lighter-blue: #fff6e0;
  --green: #1b9e78;
  --green-rgb: 27, 158, 120;
  --dark-green: #0f3c30;
  --gray: #55556a;

  --background-color: #fffdf8;
  --background-color-rgb: 255, 253, 248;
  --foreground-color: #1a1a2e;

  /* one-to-one chats in green, group chats in ink */
  --chat-rgb: 21, 122, 93;
  --muc-rgb: 26, 26, 46;

  --link-color: #157a5d;
  --link-color-hover: #0f3c30;
  --primary-color: #157a5d !important;
  --primary-rgb: 21, 122, 93;
  --primary-color-hover: #10624a !important;
  --secondary-color: #1b9e78 !important;
  --secondary-rgb: 27, 158, 120;
  --converse-highlight-color: #157a5d;
  --converse-body-color: #1a1a2e !important;
}

/* ── Dark: deep ink, bright green and the mascot's yellow ── */
.conversejs[data-converse-theme=dracula],
converse-bg[data-converse-theme=dracula] {
  --pink: #2dd4a0;
  --pink-rgb: 45, 212, 160;
  --purple: #1b9e78;
  --purple-rgb: 27, 158, 120;
  --green: #2dd4a0;
  --green-rgb: 45, 212, 160;
  --cyan: #7ee8c6;
  --orange: #ffd166;
  --orange-rgb: 255, 209, 102;
  --yellow: #ffd166;
  --yellow-rgb: 255, 209, 102;
  --gray: #8f8ba0;
  --darkgray: #1a1a2e;

  --background-color: #14141f;
  --background-color-rgb: 20, 20, 31;
  --foreground-color: #fffdf8;

  /* one-to-one chats in green, group chats in yellow */
  --chat-rgb: 45, 212, 160;
  --muc-rgb: 255, 209, 102;

  --link-color: #2dd4a0;
  --link-color-hover: #7ee8c6;
  --primary-color: #2dd4a0 !important;
  --primary-rgb: 45, 212, 160;
  --primary-color-hover: #5fe0b6 !important;
  --secondary-color: #1b9e78 !important;
  --secondary-rgb: 27, 158, 120;
  --converse-highlight-color: #ffd166 !important;
  --converse-body-color: #fffdf8 !important;
}

/* Bootstrap's own blue on the light theme's checkbox and focus ring */
.conversejs .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.conversejs .form-check-input:focus,
.conversejs .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

/* ── OpenIM logo, links and footer (openim-branding.js) ── */
.openim-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.5rem auto;
  color: var(--foreground-color);
  font: 700 1.5rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  text-decoration: none;
}

/* Converse colours every link inside .conversejs; the name stays ink, like on the site */
.conversejs a.openim-brand,
.conversejs a.openim-brand:hover {
  color: var(--foreground-color);
}

.openim-brand img {
  width: 2.25rem;
  height: 2.25rem;
}

/* Large on the login and sign-up screens */
.logged-out .openim-brand {
  margin: 2.5rem auto 2rem;
  font-size: 2.75rem;
}

.logged-out .openim-brand img {
  width: 3.5rem;
  height: 3.5rem;
}

.openim-cursor {
  color: var(--primary-color);
  animation: openim-blink 1.1s steps(1) infinite;
}

@keyframes openim-blink {
  50% { opacity: 0; }
}

.openim-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.25rem;
  padding: 1rem 1.25rem;
}

.openim-nav a,
.openim-footer a {
  color: var(--link-color);
  text-decoration: none;
}

.openim-nav a:hover,
.openim-footer a:hover {
  color: var(--link-color-hover);
  text-decoration: underline;
}

.openim-footer {
  margin: 0;
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .openim-cursor { animation: none; }
}