/**************************************************************
CF MESSENGER
Uses the forum design tokens (--light100, --secondary400, --primary400,
--dark900c, --text900, --br400, --8/--12/--16 ...), so all four themes
(.light / .medium / .dark / .darker) work without extra rules.
No non-ASCII characters in this file: it is safe under @charset windows-1251.
Add it AFTER the main style (append to the end of the CSS or @import last).
**************************************************************/

/* Local tokens
-------------------------------------------------------------*/

#cf-messenger-root {
  --cfm-line: rgb(var(--secondary400) / .38);
  --cfm-card: rgb(var(--secondary400) / .2);
  --cfm-muted: rgb(var(--text900) / .6);
  --cfm-mine: color-mix(in hsl, rgb(var(--light100)), rgb(var(--primary400)) 16%);
  --cfm-mine-line: color-mix(in hsl, rgb(var(--light100)), rgb(var(--primary400)) 45%);
  --cfm-shadow: 0 var(--8) var(--64) rgb(var(--dark900c) / .2);
  position: relative;
  margin-bottom: var(--16);
}

#cf-messenger-root.cfm-hidden,
#cf-messenger-root [hidden],
#cfm-standard-return[hidden] {
  display: none !important;
}

/* Flash guard: while the messenger owns the page, the standard PM form stays hidden
   until the script (or the fallback) marks it as visible. */
#pun-messages:has(#cf-messenger-root:not(.cfm-hidden)) .formal:not(.cfm-standard-visible) {
  display: none;
}

#cf-messenger-root.cfm-resizing,
#cf-messenger-root.cfm-resizing * {
  cursor: col-resize !important;
  user-select: none;
}

#cf-messenger-root.cfm-resizing-height,
#cf-messenger-root.cfm-resizing-height * {
  cursor: row-resize !important;
  user-select: none;
}


/* Reset of forum button styles for our own controls
   (the forum styles every <button> as a big primary pill and forces a grey hover)
-------------------------------------------------------------*/

#cf-messenger-root .cfm__button,
#cfm-standard-return .cfm__button,
#cf-messenger-root .cfm-dialog,
#cf-messenger-root .cfm-chat-head__back,
#cf-messenger-root .cfm-message__quote,
#cf-messenger-root .cfm-message__favorite,
#cf-messenger-root .cfm-message__delete,
#cf-messenger-root .cfm-new-dialog__suggestion,
#cf-messenger-root .cfm-bb {
  -webkit-appearance: none;
  appearance: none;
  margin: 0 !important;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

#cf-messenger-root .cfm__button:hover,
#cfm-standard-return .cfm__button:hover,
#cf-messenger-root .cfm-dialog:hover,
#cf-messenger-root .cfm-chat-head__back:hover,
#cf-messenger-root .cfm-message__quote:hover,
#cf-messenger-root .cfm-message__favorite:hover,
#cf-messenger-root .cfm-message__delete:hover,
#cf-messenger-root .cfm-new-dialog__suggestion:hover,
#cf-messenger-root .cfm-bb:hover {
  background: transparent !important;
  color: inherit !important;
}

#cf-messenger-root button:focus-visible,
#cf-messenger-root a:focus-visible,
#cf-messenger-root input:focus-visible,
#cf-messenger-root textarea:focus-visible,
#cfm-standard-return .cfm__button:focus-visible {
  outline: 2px solid rgb(var(--primary400));
  outline-offset: 2px;
}


/* Buttons
-------------------------------------------------------------*/

#cf-messenger-root .cfm__button,
#cfm-standard-return .cfm__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--6);
  padding: var(--6) var(--12);
  border-radius: var(--br800);
  background: rgb(var(--secondary400) / .38);
  color: rgb(var(--text900));
  font: 800 0.9rem/100% var(--font);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}

#cf-messenger-root .cfm__button:hover,
#cfm-standard-return .cfm__button:hover {
  background: rgb(var(--primary400)) !important;
  color: rgb(var(--light100)) !important;
}

#cf-messenger-root .cfm__button[disabled],
#cfm-standard-return .cfm__button[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

#cf-messenger-root .cfm__button[disabled]:hover {
  background: rgb(var(--secondary400) / .38) !important;
  color: rgb(var(--text900)) !important;
}

#cf-messenger-root .cfm__button--favorites::before {
  content: '\f005';
  font: 400 1em/100% var(--fa);
}

#cf-messenger-root .cfm__button--compose {
  background: rgb(var(--primary400));
  color: rgb(var(--light100));
  padding: var(--8) var(--16);
  font-size: 1rem;
}

#cf-messenger-root .cfm__button--compose:hover {
  background: rgb(var(--dark900)) !important;
  color: rgb(var(--light100)) !important;
}

#cf-messenger-root .cfm__button--compose[disabled]:hover {
  background: rgb(var(--primary400)) !important;
  color: rgb(var(--light100)) !important;
}

#cf-messenger-root .cfm__more {
  align-self: center;
  flex-shrink: 0;
}

#cfm-standard-return {
  margin: var(--16) 0;
}


/* Header & search
-------------------------------------------------------------*/

#cf-messenger-root .cfm {
  display: flex;
  flex-direction: column;
  gap: var(--12);
  min-width: 0;
}

#cf-messenger-root .cfm__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--12) var(--16);
}

#cf-messenger-root .cfm__title {
  display: inline-block;
  padding: var(--4) var(--12);
  border-radius: var(--br400);
  background: rgb(var(--dark900c));
  color: rgb(var(--light100c));
  font: 700 1.2rem/100% var(--font);
  text-transform: uppercase;
}

#cf-messenger-root .cfm__subtitle {
  margin-top: var(--6);
  color: var(--cfm-muted);
  font-size: 0.9rem;
}

#cf-messenger-root .cfm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--6);
}

#cf-messenger-root .cfm__search-input,
#cf-messenger-root .cfm-new-dialog__input {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: var(--8) var(--12);
  border: 1px solid transparent;
  border-radius: var(--br400);
  background: var(--cfm-card);
  color: rgb(var(--text900));
  font: 400 1rem/130% verdana, tahoma, arial, helvetica, sans-serif;
  -webkit-appearance: none;
  appearance: none;
  transition: background .2s ease, border-color .2s ease;
}

#cf-messenger-root .cfm__search-input:hover,
#cf-messenger-root .cfm-new-dialog__input:hover {
  background: rgb(var(--secondary400) / .38);
}

#cf-messenger-root .cfm__search-input:focus,
#cf-messenger-root .cfm-new-dialog__input:focus {
  border-color: rgb(var(--primary400));
  background: rgb(var(--secondary400) / .2);
}

#cf-messenger-root .cfm__search-input::-webkit-search-cancel-button {
  cursor: pointer;
}


/* Layout
-------------------------------------------------------------*/

#cf-messenger-root .cfm__layout {
  display: grid;
  grid-template-columns: var(--cfm-sidebar-width, 300px) minmax(0, 1fr);
  height: var(--cfm-chat-height, 600px);
  min-height: 0;
  border: 1px solid var(--cfm-line);
  border-radius: var(--br400);
}

#cf-messenger-root .cfm__dialogs-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--8);
  border-right: 1px solid var(--cfm-line);
  border-radius: var(--br400) 0 0 var(--br400);
  background: rgb(var(--light100));
}

/* Width drag handle (right edge of the dialog list) */
#cf-messenger-root .cfm__resizer {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: 5;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

#cf-messenger-root .cfm__resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: rgb(var(--primary400));
  opacity: 0;
  transition: opacity .2s ease;
}

#cf-messenger-root .cfm__resizer:hover::after,
#cf-messenger-root .cfm__resizer.is-dragging::after {
  opacity: 1;
}

/* The forum script forces overflow-y:auto on .cfm__chat, which would clip the editor
   drop-down panels. The message list scrolls by itself, so the column stays visible. */
#cf-messenger-root .cfm__layout .cfm__chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: visible !important;
  border-radius: 0 var(--br400) var(--br400) 0;
  background: var(--cfm-card);
}


/* Dialog list
-------------------------------------------------------------*/

#cf-messenger-root .cfm__dialogs {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--4);
  min-height: 0;
  overflow-y: auto;
}

#cf-messenger-root .cfm-dialog {
  display: flex;
  align-items: center;
  gap: var(--10, 10px);
  width: 100%;
  padding: var(--8) var(--10, 10px);
  border: 1px solid transparent;
  border-radius: var(--br300);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

#cf-messenger-root .cfm-dialog:hover {
  background: var(--cfm-card) !important;
}

#cf-messenger-root .cfm-dialog.is-active,
#cf-messenger-root .cfm-dialog.is-active:hover {
  background: rgb(var(--primary400)) !important;
  color: rgb(var(--light100)) !important;
}

#cf-messenger-root .cfm-dialog--pinned:not(.is-active) {
  border-color: var(--cfm-line);
}

#cf-messenger-root .cfm-dialog__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: var(--40);
  height: var(--40);
}

#cf-messenger-root .cfm-dialog__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--br400);
  object-fit: cover;
  background: var(--cfm-card);
}

#cf-messenger-root .cfm-dialog__online {
  position: absolute;
  top: -4px;
  right: -4px;
  width: var(--8);
  height: var(--8);
  border: var(--3) solid color-mix(in hsl, rgb(var(--light100)), rgb(var(--secondary400)) 20%);
  border-radius: 50%;
  background: rgb(var(--success));
  box-sizing: content-box;
}

#cf-messenger-root .cfm-dialog__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--2);
  min-width: 0;
}

#cf-messenger-root .cfm-dialog__top,
#cf-messenger-root .cfm-dialog__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--8);
  min-width: 0;
}

#cf-messenger-root .cfm-dialog__name {
  overflow: hidden;
  font: 800 1rem/130% var(--font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cf-messenger-root .cfm-dialog--favorites .cfm-dialog__name::before {
  content: '\f005';
  margin-right: var(--4);
  font: 900 0.9em/100% var(--fa);
  color: rgb(var(--warning));
}

#cf-messenger-root .cfm-dialog__time {
  flex-shrink: 0;
  color: var(--cfm-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

#cf-messenger-root .cfm-dialog__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--cfm-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cf-messenger-root .cfm-dialog.is-active .cfm-dialog__time,
#cf-messenger-root .cfm-dialog.is-active .cfm-dialog__text {
  color: rgb(var(--light100) / .8);
}

#cf-messenger-root .cfm-dialog__unread {
  flex-shrink: 0;
  min-width: var(--16);
  padding: 0 var(--4);
  border-radius: var(--br200);
  background: rgb(var(--danger));
  color: #fff;
  font: 900 0.9rem/130% var(--font);
  text-align: center;
}

#cf-messenger-root .cfm-dialog.is-active .cfm-dialog__unread {
  background: rgb(var(--light100));
  color: rgb(var(--danger));
}


/* Chat header
-------------------------------------------------------------*/

#cf-messenger-root .cfm-chat-head {
  display: flex;
  align-items: center;
  gap: var(--12);
  padding: var(--12) var(--16);
  border-bottom: 1px solid var(--cfm-line);
  border-radius: 0 var(--br400) 0 0;
  background: rgb(var(--light100));
}

#cf-messenger-root .cfm-chat-head__avatar {
  flex-shrink: 0;
  width: var(--40);
  height: var(--40);
  border-radius: var(--br400);
  object-fit: cover;
}

#cf-messenger-root .cfm-chat-head__main {
  flex: 1 1 auto;
  min-width: 0;
}

#cf-messenger-root .cfm-chat-head__name {
  overflow: hidden;
  font: 800 1.1rem/130% var(--font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cf-messenger-root.cfm-favorites-open .cfm-chat-head__name::before {
  content: '\f005';
  margin-right: var(--6);
  font: 900 0.9em/100% var(--fa);
  color: rgb(var(--warning));
}

#cf-messenger-root .cfm-chat-head__meta {
  color: var(--cfm-muted);
  font-size: 0.8rem;
}

#cf-messenger-root .cfm-chat-head__profile {
  flex-shrink: 0;
  padding: var(--6) var(--12);
  border-radius: var(--br800);
  background: rgb(var(--secondary400) / .38);
  color: rgb(var(--text900));
  font: 700 0.9rem/100% var(--font);
  text-transform: uppercase;
}

#cf-messenger-root .cfm-chat-head__profile:hover {
  background: rgb(var(--primary400));
  color: rgb(var(--light100));
}

/* Desktop: the list is always visible, so no back button */
#cf-messenger-root .cfm-chat-head__back {
  display: none;
  flex-shrink: 0;
  padding: var(--6) var(--12);
  border-radius: var(--br800);
  background: rgb(var(--secondary400) / .38);
  font: 800 1rem/100% var(--font);
}

#cf-messenger-root .cfm-chat-head__back:hover {
  background: rgb(var(--primary400)) !important;
  color: rgb(var(--light100)) !important;
}


/* Messages
-------------------------------------------------------------*/

#cf-messenger-root .cfm__chat-messages {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--8);
  min-height: 0;
  padding: var(--16);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#cf-messenger-root .cfm-message {
  flex-shrink: 0;
  max-width: min(78%, 680px);
  padding: var(--8) var(--12);
  border: 1px solid var(--cfm-line);
  background: rgb(var(--light100));
  overflow-wrap: anywhere;
}

#cf-messenger-root .cfm-message.is-theirs {
  align-self: flex-start;
  border-radius: var(--4) var(--br400) var(--br400) var(--br400);
}

#cf-messenger-root .cfm-message.is-mine {
  align-self: flex-end;
  border-color: var(--cfm-mine-line);
  border-radius: var(--br400) var(--4) var(--br400) var(--br400);
  background: var(--cfm-mine);
}

#cf-messenger-root .cfm-message__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--16);
  margin-bottom: var(--4);
}

#cf-messenger-root .cfm-message__author {
  font: 800 0.9rem/130% var(--font);
}

#cf-messenger-root .cfm-message__date {
  color: var(--cfm-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Message text reuses the forum .post-content rules, adjusted for a chat bubble */
#cf-messenger-root .cfm-message__body {
  padding: 0;
  font-size: 1rem;
  line-height: 150%;
}

#cf-messenger-root .cfm-message__body p {
  padding: 0 0 var(--4);
  text-align: left;
}

#cf-messenger-root .cfm-message__body p:last-child {
  padding-bottom: 0;
}

#cf-messenger-root .cfm-message__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--br200);
}

#cf-messenger-root .cfm-message__body iframe {
  max-width: 100%;
  border-radius: var(--br200);
}

#cf-messenger-root .cfm-message.is-mine .quote-box,
#cf-messenger-root .cfm-message.is-mine .code-box,
#cf-messenger-root .cfm-message.is-mine .spoiler-box {
  background: rgb(var(--light100) / .6);
}

#cf-messenger-root .cfm-message__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--4) var(--12);
  margin-top: var(--6);
  padding-top: var(--6);
  border-top: 1px solid var(--cfm-line);
  font: 700 0.8rem/120% var(--font);
}

/* Action links are dimmed until the message is hovered; the delivery status is never dimmed */
#cf-messenger-root .cfm-message__actions > :not(.cfm-message__pending) {
  opacity: .55;
  transition: opacity .2s ease, color .2s ease;
}

#cf-messenger-root .cfm-message:hover .cfm-message__actions > *,
#cf-messenger-root .cfm-message:focus-within .cfm-message__actions > * {
  opacity: 1;
}

@media (hover: none) {
  #cf-messenger-root .cfm-message__actions > * {
    opacity: 1;
  }
}

#cf-messenger-root .cfm-message__actions a,
#cf-messenger-root .cfm-message__quote,
#cf-messenger-root .cfm-message__favorite,
#cf-messenger-root .cfm-message__delete {
  display: inline-flex;
  align-items: center;
  gap: var(--4);
  color: var(--cfm-muted);
  font: 700 0.8rem/120% var(--font);
  text-transform: uppercase;
  transition: color .2s ease;
}

#cf-messenger-root .cfm-message__actions a:hover,
#cf-messenger-root .cfm-message__quote:hover,
#cf-messenger-root .cfm-message__favorite:hover {
  color: rgb(var(--primary400)) !important;
}

#cf-messenger-root .cfm-message__delete:hover {
  color: rgb(var(--danger)) !important;
}

#cf-messenger-root .cfm-message__quote::before,
#cf-messenger-root .cfm-message__favorite::before,
#cf-messenger-root .cfm-message__delete::before,
#cf-messenger-root .cfm-message__actions a[data-cfm-original]::before {
  font: 400 1em/100% var(--fa);
}

#cf-messenger-root .cfm-message__quote::before { content: '\f10d'; }
#cf-messenger-root .cfm-message__favorite::before { content: '\f005'; }
#cf-messenger-root .cfm-message__delete::before { content: '\f2ed'; }
#cf-messenger-root .cfm-message__actions a[data-cfm-original]::before { content: '\f08e'; }

#cf-messenger-root .cfm-message__favorite:hover::before {
  font-weight: 900;
}

/* Delivery status ("not received yet"): a small pill pushed to the right end of the row */
#cf-messenger-root .cfm-message__pending {
  order: 99;
  display: inline-flex;
  align-items: center;
  gap: var(--4);
  margin-left: auto;
  padding: var(--2) var(--8) var(--3);
  border: 1px solid rgb(var(--warning) / .6);
  border-radius: var(--br800);
  background: color-mix(in hsl, rgb(var(--light100)), rgb(var(--warning)) 26%);
  color: rgb(var(--text900));
  font: 700 0.8rem/130% var(--font);
  white-space: nowrap;
  cursor: help;
}

#cf-messenger-root .cfm-message__pending::before {
  content: '\f017';
  font: 400 1em/100% var(--fa);
  color: rgb(var(--text900) / .7);
}


/* Empty, loading, error
-------------------------------------------------------------*/

#cf-messenger-root .cfm__empty {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: var(--32);
  color: var(--cfm-muted);
  text-align: center;
}

#cf-messenger-root .cfm__empty-small,
#cf-messenger-root .cfm__loading,
#cf-messenger-root .cfm__error {
  padding: var(--16);
  color: var(--cfm-muted);
  text-align: center;
}

#cf-messenger-root .cfm__loading {
  animation: cfm-pulse 1.4s ease-in-out infinite;
}

#cf-messenger-root .cfm__error {
  margin: var(--4);
  border-radius: var(--br300);
  background: rgb(var(--danger) / .12);
  color: rgb(var(--danger));
}

@keyframes cfm-pulse {
  50% { opacity: .45; }
}


/* New dialog
-------------------------------------------------------------*/

#cf-messenger-root .cfm-new-dialog {
  padding: var(--16);
}

#cf-messenger-root .cfm-new-dialog__label {
  display: block;
  margin-bottom: var(--6);
  font: 800 0.9rem/130% var(--font);
}

#cf-messenger-root .cfm-new-dialog__picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--8);
}

#cf-messenger-root .cfm-new-dialog__suggestions {
  position: absolute;
  top: calc(100% + var(--4));
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
  border-radius: var(--br400);
  background: rgb(var(--light100));
  box-shadow: var(--cfm-shadow);
}

#cf-messenger-root .cfm-new-dialog__suggestions:empty {
  display: none;
}

#cf-messenger-root .cfm-new-dialog__suggestion {
  display: block;
  width: 100%;
  padding: var(--8) var(--12);
  font-size: 1rem;
  transition: background .2s ease, color .2s ease;
}

#cf-messenger-root .cfm-new-dialog__suggestion:hover {
  background: rgb(var(--primary400)) !important;
  color: rgb(var(--light100)) !important;
}

#cf-messenger-root .cfm-new-dialog__suggestion.is-loading,
#cf-messenger-root .cfm-new-dialog__suggestion.is-empty {
  color: var(--cfm-muted);
  cursor: default;
}

#cf-messenger-root .cfm-new-dialog__suggestion.is-loading:hover,
#cf-messenger-root .cfm-new-dialog__suggestion.is-empty:hover {
  background: transparent !important;
  color: var(--cfm-muted) !important;
}

#cf-messenger-root .cfm-new-dialog__suggestion.is-error {
  color: rgb(var(--danger));
  cursor: default;
}


/* Composer
-------------------------------------------------------------*/

#cf-messenger-root .cfm__height-resizer {
  position: relative;
  flex-shrink: 0;
  height: 8px;
  cursor: row-resize;
  touch-action: none;
}

#cf-messenger-root .cfm__height-resizer::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  width: 48px;
  height: 3px;
  margin-left: -24px;
  border-radius: 2px;
  background: var(--cfm-line);
  transition: background .2s ease;
}

#cf-messenger-root .cfm__height-resizer:hover::after,
#cf-messenger-root .cfm__height-resizer.is-dragging::after {
  background: rgb(var(--primary400));
}

#cf-messenger-root .cfm-native-compose-host {
  position: relative;
  flex: 0 0 auto;
  padding: var(--8) var(--16) var(--12);
  border-top: 1px solid var(--cfm-line);
  border-radius: 0 0 var(--br400) 0;
  background: rgb(var(--light100));
}

/* The forum gives every form.container a 1.4em vertical padding */
#cf-messenger-root form.cfm-native-compose.container,
#cf-messenger-root form.cfm-compose {
  margin: 0;
  padding: 0;
}

#cf-messenger-root .cfm-compose .fs-box,
#cf-messenger-root .cfm-compose fieldset {
  padding: 0;
}

#cf-messenger-root .cfm-native-compose__hidden {
  display: none !important;
}

#cf-messenger-root textarea.cfm-compose__input,
#cf-messenger-root #main-reply.cfm-compose__input {
  display: block;
  width: 100%;
  min-height: 80px;
  margin: 0 !important;
  padding: var(--8) var(--12);
  border: 1px solid transparent;
  border-radius: var(--br400);
  background: var(--cfm-card);
  color: rgb(var(--text900));
  font: 400 1rem/140% verdana, tahoma, arial, helvetica, sans-serif;
  resize: vertical;
  box-sizing: border-box;
  transition: background .2s ease, border-color .2s ease;
}

#cf-messenger-root textarea.cfm-compose__input:hover {
  background: rgb(var(--secondary400) / .38);
}

#cf-messenger-root textarea.cfm-compose__input:focus {
  border-color: rgb(var(--primary400));
  background: var(--cfm-card);
}

#cf-messenger-root .cfm-compose__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--12);
  margin-top: var(--8);
}

#cf-messenger-root .cfm-compose__status {
  min-width: 0;
  color: var(--cfm-muted);
  font-size: 0.9rem;
}

#cf-messenger-root .cfm-compose__status.is-error {
  color: rgb(var(--danger));
}

#cf-messenger-root .cfm-compose__loading {
  padding: var(--8);
}

/* Native editor toolbar: same forum icons, more compact */
#cf-messenger-root #form-buttons table tr {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: var(--6);
}

#cf-messenger-root #form-buttons td {
  width: 2rem;
  height: 2rem;
  padding: 0;
  box-sizing: border-box;
}

#cf-messenger-root #form-buttons td::before,
#cf-messenger-root #form-buttons td:hover::before {
  font-size: 1.1rem;
}

/* Drop-down panels of the native editor (fonts, colors, images, stickers) */
#cf-messenger-root #tags > .container {
  z-index: 50;
  max-width: 100%;
}

/* Fallback BBCode toolbar (shown only when the native editor failed to load) */
#cf-messenger-root .cfm-bbbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--4);
  margin-bottom: var(--8);
}

#cf-messenger-root .cfm-bb {
  min-width: 2rem;
  padding: var(--6) var(--8);
  border-radius: var(--br200);
  background: rgb(var(--secondary400) / .2);
  font: 700 0.9rem/100% var(--font);
  text-align: center;
  transition: background .2s ease, color .2s ease;
}

#cf-messenger-root .cfm-bb:hover {
  background: rgb(var(--primary400)) !important;
  color: rgb(var(--light100)) !important;
}

#cf-messenger-root .cfm-bb-sep {
  width: 1px;
  height: var(--16);
  margin: 0 var(--4);
  background: var(--cfm-line);
}


/* Tablets and phones: list and chat are shown one at a time
-------------------------------------------------------------*/

@media screen and (max-width: 700px) {
  #cf-messenger-root .cfm__head {
    flex-direction: column;
    align-items: flex-start;
  }

  #cf-messenger-root .cfm__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #cf-messenger-root .cfm__resizer {
    display: none;
  }

  #cf-messenger-root .cfm__dialogs-wrap {
    border-right: none;
    border-radius: var(--br400);
  }

  #cf-messenger-root .cfm__layout .cfm__chat {
    border-radius: var(--br400);
  }

  #cf-messenger-root:not(.cfm-dialog-open) .cfm__chat,
  #cf-messenger-root.cfm-dialog-open .cfm__dialogs-wrap,
  #cf-messenger-root.cfm-dialog-open .cfm__search {
    display: none;
  }

  #cf-messenger-root .cfm-chat-head {
    border-radius: var(--br400) var(--br400) 0 0;
  }

  #cf-messenger-root .cfm-chat-head__back {
    display: inline-flex;
  }

  #cf-messenger-root .cfm-native-compose-host {
    border-radius: 0 0 var(--br400) var(--br400);
  }

  #cf-messenger-root .cfm-message {
    max-width: 92%;
  }

  #cf-messenger-root .cfm__chat-messages {
    padding: var(--12);
  }
}


/* Reduced motion
-------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
  #cf-messenger-root *,
  #cfm-standard-return * {
    animation: none !important;
    transition: none !important;
  }
}