/* Clochat message selection — the only selection visual layer.
   Direct port of css/21-message-selection.css, which is loaded LAST among
   the rules touching `.msg.selected-msg` / `.msg.clo-selected` and is
   therefore authoritative: it resets outline/box-shadow/filter to none for
   `.msg[data-msg].selected-msg` and `.msg[data-msg].is-selected-message`,
   superseding both 00-base-layout.css's `.msg.selected-msg{outline:2px...}`
   rule and 99-final-fixes.css's near-identical `.msg.selected-msg` rule.
   Those two earlier rules are intentionally NOT reproduced here — they are
   dead in the final cascade for any `.msg` element, since every rendered
   message has the `data-msg` attribute and 21's higher-specificity
   selector always wins. The `.selectbar`/`.message-actions`/`.edit-sheet`
   classes from the v10/v11 CSS layer are also dropped: the active
   selection.js (selection/delete.js) never renders those class names, only
   `.clo-selection-*`, so that CSS was already unreachable. */
.msg[data-msg] {
  position: relative !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.msg[data-msg].selected-msg,
.msg[data-msg].is-selected-message {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.msg[data-msg].selected-msg::before,
.msg[data-msg].is-selected-message::before,
.msg[data-msg].selected-msg::after,
.msg[data-msg].is-selected-message::after {
  content: none !important;
  display: none !important;
}
.msg[data-msg].clo-selected {
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.msg[data-msg].clo-selected::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  border: 1.5px solid #fff !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 3 !important;
  box-shadow: none !important;
  transform: none !important;
}
.msg[data-msg].clo-selected::after { content: none !important; display: none !important; }

body.clo-selection-active .composer,
body.clo-selection-active .upload-preview { display: none !important; }

.clo-selection-toolbar {
  position: fixed !important;
  z-index: 2147483647 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 66px !important;
  box-sizing: border-box !important;
  padding: 9px max(10px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)) !important;
  background: #0e1a0a !important;
  border-top: 1px solid #2a4018 !important;
  color: #fff !important;
}
.clo-selection-toolbar button {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Arial, sans-serif !important;
}
.clo-selection-x { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; border-radius: 21px !important; background: #1e3014 !important; font-size: 29px !important; line-height: 42px !important; padding: 0 !important; }
.clo-selection-counter { flex: 0 0 47px !important; width: 47px !important; color: #c8dea0 !important; font: 600 10px/1.05 -apple-system, BlinkMacSystemFont, "SF Pro Text", Arial, sans-serif !important; text-align: left !important; }
.clo-selection-counter strong { display: block !important; color: #fff !important; font-size: 20px !important; line-height: 1.05 !important; }
.clo-selection-btn { flex: 1 1 0 !important; min-width: 0 !important; min-height: 38px !important; border-radius: 11px !important; background: #2a4018 !important; padding: 4px 5px !important; font-weight: 700 !important; font-size: 10.5px !important; line-height: 1.1 !important; text-align: center !important; white-space: normal !important; }
.clo-selection-btn.is-danger { background: #8a2a3a !important; }

/* Inline edit bar (#editBar) reuses .upload-preview styling from
   base-layout.css instead of a separate modal — see composer/text-composer.js. */