@import url("https://lib.scura.red/inter/inter.css");

[data-converse-theme="local"],
[data-bs-theme="local"] {
  --background: Canvas;
  --wallpaper: none;
  --color: CanvasText;
  --shade: color(from var(--color) srgb r g b / 0.03125);
  --shade-2: color(from var(--color) srgb r g b / 0.0625);
  --accent: #b02;
  --accent-contrast: #fff;
  --note: #555;
  --note-contrast: #ccc;
  background: var(--background) var(--wallpaper); color: var(--color);
  color-scheme: light dark;
  --font-family: "Inter", sans-serif;
  --font-features: "tnum" 1, "ss01", "ss04" 1, "cv11" 0;
  font-family: var(--font-family);
  font-feature-settings: var(--font-features);

  @media (prefers-color-scheme: dark) {
    --accent: #ff2333;
    --accent-contrast: #000;
    --note: #999;
    --note-contrast: #2b2b2b;
  }

  & ::selection {
    background: var(--accent); color: var(--accent-contrast);
  }
  & :any-link {
    color: var(--accent); text-decoration: none;
  }
  & :is(:any-link:hover, :any-link:focus) {
    text-decoration: underline; outline: none;
  }

  --converse-font-sans-serif: var(--font-family);
  --heading-font: var(--font-family);

  & :is(.conversejs .form-control:focus, converse-bg .form-control:focus) {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem color(from var(--accent) srgb r g b / 0.25);
  }
  & :is(.conversejs .form-help) {
    color: var(--note);
  }
  & :is(.conversejs form .form-control)::placeholder {
    color: var(--note);
  }

  & converse-bg .converse-brand {
    opacity: 0 !important;
  }

  & :is(.conversejs converse-chats.converse-fullscreen #controlbox) {
    & .flyout {
      background-color: var(--shade);
      border: none;
    }
    & converse-bg {
      display: none;
    }
    converse-user-profile {
      border: none;
      & .xmpp-status {
        padding-inline-start: calc(40px - 0.82em - 0.5em + 0.5em);
        & .xmpp-status__msg { font-size: 0.875em; }
      }
    }
    .controlbox-heading {
      text-transform: none;
      font-size: 0.875rem;
    }
    .open-rooms-toggle {
      font-size: 0;
      &::before {
        content: "Rooms";
        font-size: 0.875rem;
      }
    }
  }

  & :is(.conversejs .chatbox .chat-head:is(.chat-head-chatbox, .chat-head-chatroom)) {
    border-bottom: none;
  }

  & :is(.conversejs .message.chat-msg .chat-msg__heading .chat-msg__time) {
    color: var(--note);
  }

  & :is(.conversejs .img-thumbnail, converse-bg .img-thumbnail) {
    background: none; padding: 0;
  }

  & :is(.conversejs .modal-content, converse-bg .modal-content) {
    border: none;
  }

  & :is(converse-icon:not(.chat-status, .fa-edit, [class*="_modal"]) svg) {
    fill: var(--note);
  }
  & :is(.conversejs converse-rooms-list .close-room) {
    & :is(converse-icon svg) {
      fill: var(--highlight-text) !important;
    }
  }

  /* Hex color values */
  /* ---------------- */
  --cyan: #8be9fd;
  --green: #50fa7b;
  --green-rgb: 80, 250, 123;
  --orange: #ffb86c;
  --orange-rgb: 255, 184, 108;
  --pink: #ff79c6;
  --pink-rgb: 255, 121, 198;
  --purple: #bd93f9;
  --purple-rgb: 189, 147, 249;
  --red: #ff5555;
  --red-rgb: 255, 85, 85;
  --yellow: #f1fa8c;
  --yellow-rgb: 241, 250, 140;
  --gray: #808080;
  --darkgray: #404040;

  /* Base variables */
  /* -------------- */
  --background-color: var(--background);
  --background-color-rgb: var(--background);
  --foreground-color: var(--color);

  --chat-rgb: var(--green-rgb);
  --muc-rgb: var(--orange-rgb);

  /* Bootstrap variables */
  --primary-color: var(--accent) !important;
  --primary-rgb: var(--accent);
  --secondary-color: var(--note) !important;
  --secondary-rgb: var(--note);
  --success-color: var(--green);
  --success-color-rgb: var(--green-rgb);
  --danger-color: var(--red);
  --danger-color-rgb: var(--red-rgb);
  --warning-color: var(--orange);
  --info-color: var(--yellow);
  --info-color-rgb: var(--yellow-rgb);

  --converse-info: var(--info-color);
  --converse-info-rgb: var(--info-color-rgb);
  --converse-success: var(--success-color);
  --converse-success-rgb: var(--success-color-rgb);
  --converse-danger: var(--danger-color);
  --converse-danger-rgb: var(--danger-color-rgb);

  --converse-body-bg-rgb: var(--background-color-rgb);
  --converse-body-bg: var(--background-color);
  --converse-body-color: var(--foreground-color) !important;
  --converse-highlight-color: var(--yellow) !important;
  --converse-secondary-color: var(--secondary-color);

  .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
  }
  .navbar-nav {
    --converse-nav-link-color: var(--link-color) !important;
    --converse-nav-link-hover-color: var(--link-color-hover) !important;
  }
  .popover {
    --converse-popover-header-color: var(--foreground-color) !important;
    --converse-popover-header-bg: var(--info-color) !important;
  }
  .modal {
    --converse-modal-color: var(--foreground-color) !important;
    --converse-modal-header-padding: 0.6255rem 1rem;
    background: var(--shade) !important;

    &:is(converse-image-modal) .modal-dialog {
      width: 100%; height: 100%; max-width: none; margin: 0; padding: 0;
      &, & .modal-content, & .modal-body {
        pointer-events: none;
      }
      & .modal-content {
        height: 100%; border-radius: 0;
        background: #000d;
      }
      & .modal-header {
        position: absolute; inset: 0 0 auto 0; z-index: 1;
        justify-content: end; background: none;
        pointer-events: none;
        & button {
          filter: drop-shadow(0 0 6px var(--color));
          pointer-events: auto;
        }
      }
      & .modal-title {
        display: none;
      }
      & .modal-body {
        max-height: none !important; margin: 0 !important; padding: 0;
        align-content: center; text-align: center;
        & > * { pointer-events: auto; }
      }
      & .modal-footer {
        display: none;
      }
    }
  }
  .list-group-item {
    --converse-list-group-color: var(--foreground-color);
    &.active {
      --converse-list-group-active-color: var(--background-color) !important;
    }
  }
  .toast {
    --converse-toast-color: var(--background-color);
    --converse-toast-bg: var(--secondary-color) !important;
  }

  /* Online status indicators */
  --chat-status-away: var(--orange);
  --chat-status-busy: var(--red);
  --chat-status-offline: var(--gray);
  --chat-status-online: var(--green);

  --controlbox-color: var(--note);
  --disabled-color: var(--gray);
  --error-color: var(--red);
  --focus-color: var(--accent);
  --heading-color: var(--note);
  --link-color: var(--accent);
  --subdued-color: var(--note);

  /* The background when selecting text with your mouse */
  --selection-color: var(--accent);

  /* Used to indicate selected or open items in lists. */
  --highlight-color: var(--accent);
  --highlight-color-hover: var(--accent);
  --highlight-text: var(--accent-contrast);
  & :is(.conversejs .items-list .list-item) {
    &:is(.open, :hover) {
      color: var(--highlight-text);
      & :is(a, a:not([href]):not([tabindex])):not(.dropdown-menu a:not(:hover)) {
        color: var(--highlight-text) !important;
      }
    }
    &:is(:hover, :focus, :focus-within) {
      & converse-roster-contact a {
        text-decoration: none;
        & .contact-name { text-decoration: underline; }
      }
    }
  }

  & :is(.conversejs converse-dropdown),
  & :is(.conversejs #converse-roster .roster-contacts converse-roster-contact .contact-actions) {
    & :is(converse-icon svg) {
      fill: var(--note) !important;
    }
    & :is(.dropdown-menu .dropdown-item:hover) {
      background: var(--highlight-color) !important;
      color: var(--highlight-text) !important;
      & converse-icon svg {
        fill: var(--highlight-text) !important;
      }
    }
  }
  & :is(
    .conversejs #converse-roster .roster-contacts converse-roster-contact .contact-actions,
    .conversejs .chatbox .chat-head .chatbox-btn
  ) {
    & :is(.dropdown-toggle converse-icon svg) {
      fill: var(--highlight-text) !important;
    } 
  }

  & :is(.conversejs #converse-roster .roster-contacts .list-item .open-chat) {
    display: flex; align-items: center; gap: 0.25em;
    &.unread-msgs { color: inherit; }
    & converse-avatar:not(:has(~ converse-icon)) {
      margin-inline-end: calc(1em - 0.7em + 2px);
    }
    & .msgs-indicator.badge { order: 2; margin-inline: 0.5em 0; }
    & .contact-name { 
      width: auto; height: auto; max-width: 70%;
      &.contact-name--offline { margin-inline-start: 0; }
    }
  }

  & :is(.conversejs .message) {
    &.chat-msg {
      padding: 0.25rem; margin: 0 0.75rem; width: calc(100% - 0.75rem * 2);
      &:hover {
        background-color: var(--shade);
      }
      &.correcting {
        background-color: var(--shade-2);
      }
    }
    & .chat-msg__message {
      max-width: calc(100% - 6em);
      & converse-chat-message-body {
        max-width: calc(100% - 2em);
        & blockquote {
          --info-color: var(--secondary-color);
        }
        & .chat-image.img-thumbnail {
          cursor: pointer;
        }
      }
    }
    & .chat-msg__receipt {
      opacity: 0.375;
    }
  }

  /* 1:1 Chat-related colors */
  --chat-color: var(--note);  /* green */
  --chat-header-fg-color: var(--accent-contrast);
  --chat-header-bg-color: var(--accent);

  /* MUC-related colors */
  --muc-color: var(--note);  /* orange */
  --muc-header-fg-color: var(--accent-contrast);
  --muc-header-bg-color: var(--accent);

  /* 1:1 headlines-related colors */
  --headlines-color: var(--note);  /* pink */
  --headlines-header-fg-color: var(--accent-contrast);
  --headlines-header-bg-color: var(--accent);

  /* Derived colors */
  /* -------------- */
  --brand-heading-color: var(--accent);
  --chat-color-hover: var(--chat-color);
  --danger-color-hover: var(--danger-color);
  --global-background-color: var(--background-color);
  --link-color-hover: var(--link-color);
  --muc-color-hover: var(--muc-color);
  --primary-color-hover: var(--accent);
  --secondary-color-hover: var(--secondary-color);
  --success-color-hover: var(--success);
  --warning-color-hover: var(--orange);
}