/**************************************************************
CF MESSENGER -> adapter for the autumn2026 theme (barcross)
Connect AFTER the messenger stylesheet (append to the end of
autumn2026/style.css, or @import it last).
Does not modify the messenger stylesheet or script: it only defines
the tokens they expect and overrides a few forum rules.
Tokens holding rgb channels ("r g b") are used as rgb(var(--x) / .3).
**************************************************************/

/* 1. Tokens the messenger expects, mapped to the autumn2026 palette
-------------------------------------------------------------*/

:root {
  /* colour channels */
  --light100: 215 215 217;      /* panels, bubbles: --base-bg2 #d7d7d9 */
  --light100c: 215 215 217;     /* text on dark: --light-text */
  --dark900: 36 36 36;          /* hover of the main button: --text */
  --dark900c: 53 53 53;         /* title pill: --dark-bord */
  --text900: 36 36 36;          /* --text #242424 */
  --primary400: 71 75 77;       /* active dialog, buttons hover: --plash-bg */
  --secondary400: 140 140 145;  /* tints and lines: --accent */
  --success: 92 140 92;
  --warning: 207 139 63;        /* --accent2 (the star icon) */
  --danger: 176 58 46;

  /* soft radii */
  --br200: 8px;
  --br300: 10px;
  --br400: 14px;
  --br800: 999px;

  /* spacing scale */
  --2: 2px;
  --3: 3px;
  --4: 4px;
  --6: 6px;
  --8: 8px;
  --10: 10px;
  --12: 12px;
  --16: 16px;
  --32: 32px;
  --40: 40px;
  --64: 64px;

  /* fonts */
  --font: var(--sec-font, arimo), Arial, Helvetica, sans-serif;
  --fa: "Font Awesome 6 Pro", "Font Awesome 6 Free", FontAwesome;
}


/* 2. Overrides of forum rules that leak into the messenger
-------------------------------------------------------------*/

/* no orange glow / slow transition of forum links on message actions */
#cf-messenger-root .cfm-message__actions a,
#cf-messenger-root .cfm-chat-head__profile,
#cf-messenger-root .cfm-message__author a {
  text-shadow: none !important;
  text-decoration: none !important;
}

#cf-messenger-root .cfm-chat-head__profile {
  color: rgb(var(--text900)) !important;
}

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

/* title pill in the theme's display font */
#cf-messenger-root .cfm__title {
  font-family: var(--main-font, var(--font));
  font-weight: 400;
  letter-spacing: .05em;
}

/* the forum draws its own textured plate and 10px gaps on #form-buttons;
   inside the messenger the editor toolbar must stay compact */
#cf-messenger-root #form-buttons {
  gap: 0;
  padding: 0;
  margin: 0 0 var(--6);
  background: transparent;
  border: none;
  border-image: none;
  justify-content: flex-start;
}

#cf-messenger-root #form-buttons td::before {
  color: rgb(var(--text900));
}

#cf-messenger-root #form-buttons td:hover::before {
  color: rgb(var(--primary400));
}

/* forum "input/textarea 64% width" rule must not shrink our fields */
#cf-messenger-root .cfm__search-input,
#cf-messenger-root .cfm-new-dialog__input,
#cf-messenger-root textarea.cfm-compose__input {
  width: 100%;
  font-family: var(--font);
}

/* scrollbars inside the messenger: theme accent instead of the global one */
#cf-messenger-root .cfm__dialogs,
#cf-messenger-root .cfm__chat-messages {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--secondary400)) transparent;
}

/* the "unread" badge and dialog highlight get the theme accent */
#cf-messenger-root .cfm-dialog__unread {
  background: var(--accent2, rgb(var(--danger)));
  color: rgb(var(--dark900));
}

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

/* the forum applies a global filter to images; keep avatars and stickers natural */
#cf-messenger-root img {
  filter: none;
}



/* 3. Soft variant: compact, rounded bubbles, round avatars
-------------------------------------------------------------*/

#cf-messenger-root {
  --cfm-muted: rgb(var(--text900) / .7);
  --cfm-line: rgb(var(--secondary400) / .5);
  --cfm-sidebar-width: 300px;
  --cfm-side-bg: #e4e4e7;
  --cfm-chat-bg: #d3d3d7;
  --cfm-bar-bg: #dcdcdf;
  --cfm-bubble: #f1f1f3;
  --cfm-mine-bg: #474b4d;
  --cfm-mine-tx: #f0f0f2;
  font-size: 13px;
}

/* header */
#cf-messenger-root .cfm__head {
  gap: var(--8) var(--12);
}

#cf-messenger-root .cfm__title {
  padding: 4px 14px;
  font-size: 1.05rem;
  letter-spacing: .05em;
}

#cf-messenger-root .cfm__subtitle {
  margin-top: 4px;
  font-size: 12px;
}

#cf-messenger-root .cfm__button,
#cfm-standard-return .cfm__button {
  padding: 5px 12px;
  border: none;
  background: rgb(var(--primary400));
  color: rgb(var(--light100));
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}

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

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

#cf-messenger-root .cfm__search-input {
  padding: 7px 14px;
  border-radius: 999px;
  border-color: transparent;
  font-size: 12px;
}

/* layout: no outer frame, two soft panels */
#cf-messenger-root .cfm__layout {
  border: none;
}

#cf-messenger-root .cfm__dialogs-wrap {
  padding: 6px;
  border-right: none;
  background: var(--cfm-side-bg);
}

#cf-messenger-root .cfm__layout .cfm__chat {
  background: var(--cfm-chat-bg);
}

/* dialog list */
#cf-messenger-root .cfm-dialog {
  gap: 8px;
  padding: 6px 8px;
  border-color: transparent;
}

#cf-messenger-root .cfm-dialog:hover {
  background: rgb(var(--secondary400) / .22) !important;
}

#cf-messenger-root .cfm-dialog__avatar-wrap {
  width: 34px;
  height: 34px;
}

#cf-messenger-root .cfm-dialog__avatar,
#cf-messenger-root .cfm-chat-head__avatar {
  border-radius: 50%;
}

#cf-messenger-root .cfm-dialog__online {
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
}

#cf-messenger-root .cfm-dialog__name {
  font-size: 13px;
  font-weight: 700;
}

#cf-messenger-root .cfm-dialog__time {
  font-size: 10.5px;
}

#cf-messenger-root .cfm-dialog__text {
  font-size: 11.5px;
}

#cf-messenger-root .cfm-dialog__unread {
  min-width: 18px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 18px;
}

/* chat header */
#cf-messenger-root .cfm-chat-head {
  gap: 10px;
  padding: 8px 14px;
  background: var(--cfm-bar-bg);
}

#cf-messenger-root .cfm-chat-head__avatar {
  width: 34px;
  height: 34px;
}

#cf-messenger-root .cfm-chat-head__name {
  font-family: var(--main-font, var(--font));
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .03em;
}

#cf-messenger-root .cfm-chat-head__meta {
  font-size: 11px;
}

#cf-messenger-root .cfm-chat-head__profile,
#cf-messenger-root .cfm-chat-head__back {
  padding: 5px 12px;
  background: rgb(var(--primary400));
  color: rgb(var(--light100)) !important;
  font-size: 11px;
  letter-spacing: .05em;
}

#cf-messenger-root .cfm-chat-head__profile:hover,
#cf-messenger-root .cfm-chat-head__back:hover {
  background: rgb(var(--dark900)) !important;
}

/* messages */
#cf-messenger-root .cfm__chat-messages {
  gap: 6px;
  padding: 12px 14px;
}

#cf-messenger-root .cfm-message {
  min-width: 0;
  max-width: min(78%, 560px);
  padding: 6px 12px 7px;
  border-color: transparent;
  background: var(--cfm-bubble);
}

#cf-messenger-root .cfm-message.is-theirs {
  border-radius: 14px 14px 14px 4px;
}

#cf-messenger-root .cfm-message.is-mine {
  border-color: transparent;
  border-radius: 14px 14px 4px 14px;
  background: var(--cfm-mine-bg);
  color: var(--cfm-mine-tx);
}

#cf-messenger-root .cfm-message__meta {
  gap: 14px;
  margin-bottom: 2px;
}

#cf-messenger-root .cfm-message__author {
  font-size: 12px;
}

#cf-messenger-root .cfm-message__date {
  font-size: 10.5px;
}

#cf-messenger-root .cfm-message__body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 150%;
}

#cf-messenger-root .cfm-message.is-mine .cfm-message__date,
#cf-messenger-root .cfm-message.is-mine .cfm-message__author {
  color: #d8d8dc;
}

#cf-messenger-root .cfm-message.is-mine .cfm-message__body a {
  color: #f3c78f !important;
}

#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) / .85);
  color: rgb(var(--text900));
}

#cf-messenger-root .cfm-message__actions {
  gap: 2px 12px;
  margin-top: 4px;
  padding-top: 4px;
  border-top-color: rgb(var(--secondary400) / .4);
}

#cf-messenger-root .cfm-message__actions > :not(.cfm-message__pending) {
  opacity: .75;
}

#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 {
  font-size: 10.5px;
  letter-spacing: .04em;
}

#cf-messenger-root .cfm-message.is-mine .cfm-message__actions {
  border-top-color: rgb(255 255 255 / .2);
}

#cf-messenger-root .cfm-message.is-mine .cfm-message__actions a,
#cf-messenger-root .cfm-message.is-mine .cfm-message__quote,
#cf-messenger-root .cfm-message.is-mine .cfm-message__favorite,
#cf-messenger-root .cfm-message.is-mine .cfm-message__delete {
  color: #d0d0d5;
}

#cf-messenger-root .cfm-message.is-mine .cfm-message__actions a:hover,
#cf-messenger-root .cfm-message.is-mine .cfm-message__quote:hover,
#cf-messenger-root .cfm-message.is-mine .cfm-message__favorite:hover {
  color: #fff !important;
}

#cf-messenger-root .cfm-message__body .quote-box {
  padding: 6px 10px;
  font-size: 12px;
}

/* code must not blow the bubble */
#cf-messenger-root .cfm-message__body .code-box,
#cf-messenger-root .cfm-message__body .blockcode,
#cf-messenger-root .cfm-message__body pre {
  max-width: 100%;
  overflow-x: auto;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

#cf-messenger-root .cfm-message__body .code-box *,
#cf-messenger-root .cfm-message__body .blockcode * {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* composer */
#cf-messenger-root .cfm-native-compose-host {
  padding: 6px 14px 10px;
  background: var(--cfm-bar-bg);
}

#cf-messenger-root textarea.cfm-compose__input,
#cf-messenger-root #main-reply.cfm-compose__input {
  min-height: 56px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--cfm-chat-bg);
  font-size: 13px;
}

#cf-messenger-root textarea.cfm-compose__input::placeholder {
  color: rgb(var(--text900) / .55);
}

#cf-messenger-root #form-buttons td {
  width: 1.7rem;
  height: 1.7rem;
}

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

#cf-messenger-root .cfm__height-resizer::after {
  border-radius: 999px;
}

/* new dialog form */
#cf-messenger-root .cfm-new-dialog__input {
  border-radius: 999px;
  padding: 7px 14px;
}

#cf-messenger-root .cfm-new-dialog__suggestions {
  border-radius: 14px;
  overflow: hidden;
}

/* phones */
@media screen and (max-width: 700px) {
  #cf-messenger-root {
    --cfm-sidebar-width: 100%;
  }

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

  #cf-messenger-root .cfm__dialogs-wrap {
    border-radius: 14px;
  }
}


/* 4. Quotes inside bubbles: slim accent strip instead of the forum box
-------------------------------------------------------------*/

#cf-messenger-root .cfm-message__body .quote-box {
  --cfm-q-accent: #cf8b3f;
  --cfm-q-name: #9a5c17;
  position: relative;
  margin: 2px 0 6px !important;
  padding: 5px 10px 6px 11px !important;
  border: none !important;
  border-left: 3px solid var(--cfm-q-accent) !important;
  border-radius: 4px 10px 10px 4px !important;
  background: rgb(var(--secondary400) / .18) !important;
  box-shadow: none !important;
  color: rgb(var(--text900) / .88) !important;
  font-size: 12px;
  line-height: 1.45;
}

/* kill the glowing badge and every glow the theme adds */
#cf-messenger-root .cfm-message__body .quote-box::before,
#cf-messenger-root .cfm-message__body .quote-box::after {
  content: none !important;
  display: none !important;
}

#cf-messenger-root .cfm-message__body .quote-box,
#cf-messenger-root .cfm-message__body .quote-box * {
  text-shadow: none !important;
  filter: none !important;
}

/* author line: plain text, no dark label */
#cf-messenger-root .cfm-message__body .quote-box cite {
  display: block;
  margin: 0 0 3px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--cfm-q-name) !important;
  font: 700 11px/1.3 var(--font) !important;
  font-style: normal !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

#cf-messenger-root .cfm-message__body .quote-box cite::before {
  content: '\f10d' !important;
  display: inline-block !important;
  margin-right: 5px;
  color: var(--cfm-q-accent);
  font: 900 9px/1 var(--fa) !important;
  vertical-align: 1px;
}

/* the quoted text: quieter, capped so long quotes do not eat the chat */
#cf-messenger-root .cfm-message__body .quote-box blockquote {
  width: auto !important;
  max-height: 7.5em;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto;
  border: none !important;
  background: none !important;
  color: inherit !important;
  scrollbar-width: thin;
}

#cf-messenger-root .cfm-message__body .quote-box p {
  margin: 0;
  padding: 0 0 3px;
  font-size: 12px;
  line-height: 1.45;
}

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

/* quote inside a quote */
#cf-messenger-root .cfm-message__body .quote-box .quote-box {
  margin: 2px 0 4px !important;
  padding: 3px 8px 4px 9px !important;
  background: rgb(var(--secondary400) / .16) !important;
}

/* my own bubble (dark) */
#cf-messenger-root .cfm-message.is-mine .cfm-message__body .quote-box {
  --cfm-q-accent: #f3c78f;
  --cfm-q-name: #f3c78f;
  background: rgb(255 255 255 / .1) !important;
  color: #e6e6e9 !important;
}

#cf-messenger-root .cfm-message.is-mine .cfm-message__body .quote-box .quote-box {
  background: rgb(255 255 255 / .07) !important;
}


/* 5. Send row: submit button and a light "save" checkbox
-------------------------------------------------------------*/

#cf-messenger-root .formsubmit,
#cf-messenger-root .cfm-compose__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 12px;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  text-align: right;
}

#cf-messenger-root .formsubmit > *,
#cf-messenger-root .formsubmit input,
#cf-messenger-root .formsubmit span {
  margin: 0 !important;
}

/* label with a checkbox: no chip, just a small quiet line */
#cf-messenger-root .checkfield,
#cf-messenger-root label:has(input[type="checkbox"]:not(#text-controls input)) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  padding: 1px 2px;
  background: none;
  color: rgb(var(--text900) / .75);
  font: 400 11.5px/1.2 var(--font);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  user-select: none;
  transition: color .2s ease;
}

#cf-messenger-root .checkfield:hover,
#cf-messenger-root label:has(input[type="checkbox"]:not(#text-controls input)):hover {
  color: rgb(var(--text900));
}

/* small round box, orange with a check when on */
#cf-messenger-root input[type="checkbox"]:not(#text-controls input) {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 13px;
  height: 13px;
  margin: 0 !important;
  padding: 0;
  border: 1.5px solid rgb(var(--text900) / .5);
  border-radius: 50%;
  background: transparent center / 9px no-repeat;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

#cf-messenger-root input[type="checkbox"]:not(#text-controls input):hover {
  border-color: #cf8b3f;
}

#cf-messenger-root input[type="checkbox"]:not(#text-controls input):checked {
  border-color: #cf8b3f;
  background-color: #cf8b3f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#cf-messenger-root input[type="checkbox"]:not(#text-controls input):focus-visible {
  outline: 2px solid rgb(var(--primary400));
  outline-offset: 2px;
}


/* 6. Dialog list: nick and date only, no message preview
-------------------------------------------------------------*/

#cf-messenger-root .cfm-dialog {
  position: relative;
}

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

/* nick on the first line with the full width, date under it */
#cf-messenger-root .cfm-dialog__top {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

#cf-messenger-root .cfm-dialog__name {
  max-width: 100%;
}

/* the unread badge sits at the right edge, vertically centered */
#cf-messenger-root .cfm-dialog__bottom {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

#cf-messenger-root .cfm-dialog:has(.cfm-dialog__unread) .cfm-dialog__top {
  padding-right: 28px;
}


/* Tools toggle button (created by messenger-mobile-tools.js); visible on phones only
-------------------------------------------------------------*/

#cf-messenger-root .cfm-tools-toggle {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px !important;
  padding: 4px 4px 4px 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgb(var(--text900) / .75);
  font: 700 11px/1.2 var(--font);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

#cf-messenger-root .cfm-tools-toggle:hover {
  background: transparent !important;
  color: rgb(var(--text900)) !important;
}

#cf-messenger-root .cfm-tools-toggle::after {
  content: '\f078';
  font: 900 9px/1 var(--fa);
  transition: transform .2s ease;
}

#cf-messenger-root .cfm-tools-toggle.is-open::after {
  transform: rotate(180deg);
}


/* 7. Mobile: phones and the theme's .force-mobile mode
-------------------------------------------------------------*/

@media screen and (max-width: 700px) {
  #cf-messenger-root {
    --cfm-sidebar-width: 100%;
    margin-bottom: var(--12);
  }
  
  /* header: title on its own line, buttons wrap in a tidy row */
  #cf-messenger-root .cfm__head {
    gap: 8px;
  }
  
  #cf-messenger-root .cfm__title {
    font-size: .95rem;
  }
  
  #cf-messenger-root .cfm__subtitle {
    font-size: 11px;
  }
  
  #cf-messenger-root .cfm__actions {
    gap: 4px;
    width: 100%;
  }
  
  #cf-messenger-root .cfm__actions .cfm__button {
    flex: 1 1 auto;
    padding: 6px 10px;
    font-size: 10.5px;
  }
  
  /* 16px in fields stops iOS from zooming the page on focus */
  #cf-messenger-root .cfm__search-input,
  #cf-messenger-root .cfm-new-dialog__input,
  #cf-messenger-root textarea.cfm-compose__input,
  #cf-messenger-root #main-reply.cfm-compose__input {
    font-size: 16px;
  }
  
  /* panel height follows the screen, not a fixed 600px */
  #cf-messenger-root .cfm__layout {
    height: min(var(--cfm-chat-height, 600px), 78vh);
    height: min(var(--cfm-chat-height, 600px), 78dvh);
    min-height: 380px;
  }
  
  /* dialog list: bigger touch targets */
  #cf-messenger-root .cfm-dialog {
    padding: 8px 10px;
  }
  
  #cf-messenger-root .cfm-dialog__avatar-wrap {
    width: 38px;
    height: 38px;
  }
  
  #cf-messenger-root .cfm-dialog__name {
    font-size: 14px;
  }
  
  #cf-messenger-root .cfm-dialog__time {
    font-size: 11px;
  }
  
  /* chat header */
  #cf-messenger-root .cfm-chat-head {
    gap: 8px;
    padding: 8px 10px;
  }
  
  #cf-messenger-root .cfm-chat-head__avatar {
    width: 30px;
    height: 30px;
  }
  
  #cf-messenger-root .cfm-chat-head__name {
    font-size: 1rem;
  }
  
  #cf-messenger-root .cfm-chat-head__meta {
    font-size: 10.5px;
  }
  
  #cf-messenger-root .cfm-chat-head__profile,
  #cf-messenger-root .cfm-chat-head__back {
    padding: 6px 10px;
  }
  
  /* messages */
  #cf-messenger-root .cfm__chat-messages {
    gap: 6px;
    padding: 10px;
  }
  
  #cf-messenger-root .cfm-message {
    max-width: 90%;
    padding: 6px 10px 7px;
  }
  
  #cf-messenger-root .cfm-message__body {
    font-size: 13.5px;
  }
  
  #cf-messenger-root .cfm-message__meta {
    gap: 10px;
  }
  
  #cf-messenger-root .cfm-message__actions {
    gap: 4px 14px;
  }
  
  #cf-messenger-root .cfm-message__actions > * {
    opacity: 1;
  }
  
  #cf-messenger-root .cfm-message__body img,
  #cf-messenger-root .cfm-message__body iframe,
  #cf-messenger-root .cfm-message__body table {
    max-width: 100%;
  }
  
  #cf-messenger-root .cfm-message__body .quote-box blockquote {
    max-height: 6em;
  }
  
  /* composer: bigger toolbar buttons, wraps instead of scrolling sideways */
  #cf-messenger-root .cfm-native-compose-host {
    padding: 6px 10px 10px;
  }
  
  #cf-messenger-root #form-buttons td {
    width: 2rem;
    height: 2rem;
  }
  
  #cf-messenger-root textarea.cfm-compose__input,
  #cf-messenger-root #main-reply.cfm-compose__input {
    min-height: 48px;
    padding: 8px 12px;
  }
  
  #cf-messenger-root .formsubmit,
  #cf-messenger-root .cfm-compose__actions {
    justify-content: space-between;
  }
  
  #cf-messenger-root .cfm-new-dialog {
    padding: 12px;
  }
  
  /* Toolbar and masks bar are folded away until the "Tools" button is pressed.
     The messenger script re-shows anything that turns display:none / visibility:hidden /
     opacity:0 / max-height:0 (inline !important), so the toolbar is collapsed by height. */
  #cf-messenger-root:not(.cfm-tools-open) #form-buttons,
  #cf-messenger-root:not(.cfm-tools-open) #tags {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-image: none !important;
    overflow: hidden !important;
    pointer-events: none;
  }
  
  #cf-messenger-root:not(.cfm-tools-open) .custom-reply-mini-profile-wrapper,
  #cf-messenger-root:not(.cfm-tools-open) .hv2-bar,
  #cf-messenger-root:not(.cfm-tools-open) #post-form > div > details {
    display: none !important;
  }
  
  #cf-messenger-root .cfm-tools-toggle {
    display: inline-flex;
  }
  
  /* top buttons: one scrollable row of light chips, the main action stays dark */
  #cf-messenger-root .cfm__actions {
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    margin: 0 -2px;
    padding: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  #cf-messenger-root .cfm__actions::-webkit-scrollbar {
    display: none;
  }
  
  #cf-messenger-root .cfm__actions .cfm__button {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: rgb(var(--secondary400) / .3);
    color: rgb(var(--text900));
    font-size: 10.5px;
    letter-spacing: .04em;
  }
  
  #cf-messenger-root .cfm__actions .cfm__button:hover,
  #cf-messenger-root .cfm__actions .cfm__button:active {
    background: rgb(var(--secondary400) / .5) !important;
    color: rgb(var(--text900)) !important;
  }
  
  #cf-messenger-root .cfm__actions .cfm__button--compose {
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
  }
  
  #cf-messenger-root .cfm__actions .cfm__button--compose:hover,
  #cf-messenger-root .cfm__actions .cfm__button--compose:active {
    background: rgb(var(--dark900)) !important;
    color: rgb(var(--light100)) !important;
  }
  
  #cf-messenger-root .cfm__actions .cfm__button--favorites::before {
    color: #cf8b3f;
  }
  
  /* no title and subtitle on phones: the space goes to the dialogs */
  #cf-messenger-root .cfm__head > *:has(.cfm__title),
  #cf-messenger-root .cfm__title,
  #cf-messenger-root .cfm__subtitle {
    display: none !important;
  }
  
  #cf-messenger-root .cfm {
    gap: 8px;
  }
  
  /* taller panel: most of the screen height */
  #cf-messenger-root .cfm__layout {
    height: 86vh;
    height: 86dvh;
    min-height: 460px;
  }
}

/* same rules for the theme's forced mobile mode on wider screens */
.force-mobile #cf-messenger-root {
  --cfm-sidebar-width: 100%;
  margin-bottom: var(--12);
}

/* header: title on its own line, buttons wrap in a tidy row */
.force-mobile #cf-messenger-root .cfm__head {
  gap: 8px;
}

.force-mobile #cf-messenger-root .cfm__title {
  font-size: .95rem;
}

.force-mobile #cf-messenger-root .cfm__subtitle {
  font-size: 11px;
}

.force-mobile #cf-messenger-root .cfm__actions {
  gap: 4px;
  width: 100%;
}

.force-mobile #cf-messenger-root .cfm__actions .cfm__button {
  flex: 1 1 auto;
  padding: 6px 10px;
  font-size: 10.5px;
}

/* 16px in fields stops iOS from zooming the page on focus */
.force-mobile #cf-messenger-root .cfm__search-input,
.force-mobile #cf-messenger-root .cfm-new-dialog__input,
.force-mobile #cf-messenger-root textarea.cfm-compose__input,
.force-mobile #cf-messenger-root #main-reply.cfm-compose__input {
  font-size: 16px;
}

/* panel height follows the screen, not a fixed 600px */
.force-mobile #cf-messenger-root .cfm__layout {
  height: min(var(--cfm-chat-height, 600px), 78vh);
  height: min(var(--cfm-chat-height, 600px), 78dvh);
  min-height: 380px;
}

/* dialog list: bigger touch targets */
.force-mobile #cf-messenger-root .cfm-dialog {
  padding: 8px 10px;
}

.force-mobile #cf-messenger-root .cfm-dialog__avatar-wrap {
  width: 38px;
  height: 38px;
}

.force-mobile #cf-messenger-root .cfm-dialog__name {
  font-size: 14px;
}

.force-mobile #cf-messenger-root .cfm-dialog__time {
  font-size: 11px;
}

/* chat header */
.force-mobile #cf-messenger-root .cfm-chat-head {
  gap: 8px;
  padding: 8px 10px;
}

.force-mobile #cf-messenger-root .cfm-chat-head__avatar {
  width: 30px;
  height: 30px;
}

.force-mobile #cf-messenger-root .cfm-chat-head__name {
  font-size: 1rem;
}

.force-mobile #cf-messenger-root .cfm-chat-head__meta {
  font-size: 10.5px;
}

.force-mobile #cf-messenger-root .cfm-chat-head__profile,
.force-mobile #cf-messenger-root .cfm-chat-head__back {
  padding: 6px 10px;
}

/* messages */
.force-mobile #cf-messenger-root .cfm__chat-messages {
  gap: 6px;
  padding: 10px;
}

.force-mobile #cf-messenger-root .cfm-message {
  max-width: 90%;
  padding: 6px 10px 7px;
}

.force-mobile #cf-messenger-root .cfm-message__body {
  font-size: 13.5px;
}

.force-mobile #cf-messenger-root .cfm-message__meta {
  gap: 10px;
}

.force-mobile #cf-messenger-root .cfm-message__actions {
  gap: 4px 14px;
}

.force-mobile #cf-messenger-root .cfm-message__actions > * {
  opacity: 1;
}

.force-mobile #cf-messenger-root .cfm-message__body img,
.force-mobile #cf-messenger-root .cfm-message__body iframe,
.force-mobile #cf-messenger-root .cfm-message__body table {
  max-width: 100%;
}

.force-mobile #cf-messenger-root .cfm-message__body .quote-box blockquote {
  max-height: 6em;
}

/* composer: bigger toolbar buttons, wraps instead of scrolling sideways */
.force-mobile #cf-messenger-root .cfm-native-compose-host {
  padding: 6px 10px 10px;
}

.force-mobile #cf-messenger-root #form-buttons td {
  width: 2rem;
  height: 2rem;
}

.force-mobile #cf-messenger-root textarea.cfm-compose__input,
.force-mobile #cf-messenger-root #main-reply.cfm-compose__input {
  min-height: 48px;
  padding: 8px 12px;
}

.force-mobile #cf-messenger-root .formsubmit,
.force-mobile #cf-messenger-root .cfm-compose__actions {
  justify-content: space-between;
}

.force-mobile #cf-messenger-root .cfm-new-dialog {
  padding: 12px;
}

/* Toolbar and masks bar are folded away until the "Tools" button is pressed.
   The messenger script re-shows anything that turns display:none / visibility:hidden /
   opacity:0 / max-height:0 (inline !important), so the toolbar is collapsed by height. */
.force-mobile #cf-messenger-root:not(.cfm-tools-open) #form-buttons,
.force-mobile #cf-messenger-root:not(.cfm-tools-open) #tags {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-image: none !important;
  overflow: hidden !important;
  pointer-events: none;
}

.force-mobile #cf-messenger-root:not(.cfm-tools-open) .custom-reply-mini-profile-wrapper,
.force-mobile #cf-messenger-root:not(.cfm-tools-open) .hv2-bar,
.force-mobile #cf-messenger-root:not(.cfm-tools-open) #post-form > div > details {
  display: none !important;
}

.force-mobile #cf-messenger-root .cfm-tools-toggle {
  display: inline-flex;
}

/* top buttons: one scrollable row of light chips, the main action stays dark */
.force-mobile #cf-messenger-root .cfm__actions {
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  margin: 0 -2px;
  padding: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.force-mobile #cf-messenger-root .cfm__actions::-webkit-scrollbar {
  display: none;
}

.force-mobile #cf-messenger-root .cfm__actions .cfm__button {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: rgb(var(--secondary400) / .3);
  color: rgb(var(--text900));
  font-size: 10.5px;
  letter-spacing: .04em;
}

.force-mobile #cf-messenger-root .cfm__actions .cfm__button:hover,
.force-mobile #cf-messenger-root .cfm__actions .cfm__button:active {
  background: rgb(var(--secondary400) / .5) !important;
  color: rgb(var(--text900)) !important;
}

.force-mobile #cf-messenger-root .cfm__actions .cfm__button--compose {
  background: rgb(var(--primary400));
  color: rgb(var(--light100));
}

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

.force-mobile #cf-messenger-root .cfm__actions .cfm__button--favorites::before {
  color: #cf8b3f;
}

/* no title and subtitle on phones: the space goes to the dialogs */
.force-mobile #cf-messenger-root .cfm__head > *:has(.cfm__title),
.force-mobile #cf-messenger-root .cfm__title,
.force-mobile #cf-messenger-root .cfm__subtitle {
  display: none !important;
}

.force-mobile #cf-messenger-root .cfm {
  gap: 8px;
}

/* taller panel: most of the screen height */
.force-mobile #cf-messenger-root .cfm__layout {
  height: 86vh;
  height: 86dvh;
  min-height: 460px;
}