:root {
  --ctp-rosewater: #f2d5cf;
  --ctp-flamingo: #eebebe;
  --ctp-text: #c6d0f5;
  --ctp-subtext: #a5adce;
  --ctp-surface: #414559;
  --ctp-base: #303446;
  --ctp-mantle: #292c3c;
  --ctp-crust: #232634;
}

/* overall */
body,
#conversejs {
  background: var(--ctp-crust) !important;
  color: var(--ctp-text) !important;
  font-family: system-ui, sans-serif !important;
}

/* panels */
#conversejs .chatbox,
#conversejs .modal-content,
#conversejs .flyout,
#conversejs .controlbox-pane,
#conversejs .chat-content {
  background: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface) !important;
}

/* headers */
#conversejs .chat-head,
#conversejs .chatbox-title,
#conversejs .modal-header {
  background: var(--ctp-mantle) !important;
  color: var(--ctp-rosewater) !important;
  border-color: var(--ctp-surface) !important;
}

/* text */
#conversejs a,
#conversejs .chat-msg__author,
#conversejs .username {
  color: var(--ctp-rosewater) !important;
}

/* inputs */
#conversejs input,
#conversejs textarea,
#conversejs select {
  background: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
  border: 1px solid var(--ctp-surface) !important;
}

/* buttons */
#conversejs button,
#conversejs .btn {
  background: var(--ctp-rosewater) !important;
  color: var(--ctp-crust) !important;
  border: none !important;
  border-radius: 6px !important;
}

#conversejs button:hover,
#conversejs .btn:hover {
  background: var(--ctp-flamingo) !important;
}

/* message area */
#conversejs .sendXMPPMessage {
  background: var(--ctp-mantle) !important;
  border-top: 1px solid var(--ctp-surface) !important;
}

/* avatar circles */
#conversejs .avatar-initials {
  background: var(--ctp-rosewater) !important;
  color: var(--ctp-crust) !important;
  border-radius: 999px !important;
}

/* NORMAL ICONS */
#conversejs svg {
  fill: var(--ctp-text) !important;
  color: var(--ctp-text) !important;
  stroke: var(--ctp-text) !important;
}

/* ICON HOVER */
#conversejs button:hover svg,
#conversejs a:hover svg {
  fill: var(--ctp-rosewater) !important;
  color: var(--ctp-rosewater) !important;
  stroke: var(--ctp-rosewater) !important;
}

/* SEND BUTTON ICON */
#conversejs .send-button svg,
#conversejs button[type="submit"] svg {
  fill: var(--ctp-crust) !important;
  color: var(--ctp-crust) !important;
}

/* unread badges */
#conversejs .msgs-indicator,
#conversejs .badge {
  background: var(--ctp-rosewater) !important;
  color: var(--ctp-crust) !important;
  font-weight: bold !important;
}

/* active room */
#conversejs .selected,
#conversejs .rooms-list-container .list-item.active {
  background: var(--ctp-surface) !important;
}

/* scrollbars */
#conversejs ::-webkit-scrollbar {
  width: 10px;
}

#conversejs ::-webkit-scrollbar-track {
  background: var(--ctp-crust);
}

#conversejs ::-webkit-scrollbar-thumb {
  background: var(--ctp-surface);
  border-radius: 8px;
}

/* FINAL PATCH: kill Converse green + fix emoji/avatar contrast */

/* kill neon green everywhere it commonly leaks */
#conversejs [style*="#5a8300"],
#conversejs [style*="rgb(90, 131, 0)"],
#conversejs .avatar-initials {
  background-color: var(--ctp-surface) !important;
  color: var(--ctp-rosewater) !important;
}

/* lobby avatar/icon specifically */
#conversejs .avatar-initials[aria-label*="lobby"],
#conversejs .avatar-initials[aria-label*="conference"] {
  background-color: var(--ctp-mantle) !important;
  color: var(--ctp-rosewater) !important;
  border: 1px solid var(--ctp-rosewater) !important;
}

/* force icon-bars/hamburger readable */
#conversejs svg use[href="#icon-bars"],
#conversejs svg:has(use[href="#icon-bars"]) {
  fill: var(--ctp-text) !important;
  color: var(--ctp-text) !important;
  stroke: var(--ctp-text) !important;
}

/* emoji button: keep button bg, make icon dark/readable */
#conversejs .toggle-smiley,
#conversejs .toggle-smiley__container,
#conversejs button[title*="Emoji"],
#conversejs button[aria-label*="Emoji"] {
  background: var(--ctp-rosewater) !important;
  color: var(--ctp-crust) !important;
}

#conversejs .toggle-smiley svg,
#conversejs .toggle-smiley__container svg,
#conversejs button[title*="Emoji"] svg,
#conversejs button[aria-label*="Emoji"] svg {
  fill: var(--ctp-crust) !important;
  color: var(--ctp-crust) !important;
  stroke: var(--ctp-crust) !important;
}

/* send button should match emoji button */
#conversejs .send-button,
#conversejs button[type="submit"] {
  background: var(--ctp-rosewater) !important;
  color: var(--ctp-crust) !important;
}

#conversejs .send-button svg,
#conversejs button[type="submit"] svg {
  fill: var(--ctp-crust) !important;
  color: var(--ctp-crust) !important;
  stroke: var(--ctp-crust) !important;
}