/* ==========================================================================
   CIRCLE CHAT CSS CONTRACT — LOAD LAST. DO NOT OVERRIDE CASUALLY.
   Prevents: vertical letter stacks, collapsed bubbles, raw controls.
   Paired with: scripts/validate-css-stability.js
   ========================================================================== */

/* ── Message row sizing ── */
.sf-circle-chat-msg,
.circles-shell-page .sf-circle-chat-msg,
body.feed-page.is-circle-chat-active .sf-circle-chat-msg {
  width: fit-content;
  max-width: 82%;
  align-self: flex-start;
}

.sf-circle-chat-msg.is-self,
.circles-shell-page .sf-circle-chat-msg.is-self,
body.feed-page.is-circle-chat-active .sf-circle-chat-msg.is-self {
  margin-left: auto;
  align-self: flex-end;
  max-width: 78%;
}

.circles-shell-page .sf-circle-chat-msg,
.circles-shell-page .sf-circle-chat-msg.is-self {
  max-width: 76%;
}

/* ── Bubble column must not collapse below content ── */
.sf-circle-chat-bubble-col,
.circles-shell-page .sf-circle-chat-bubble-col {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* ── Bubbles: NEVER min-width:0 only (causes vertical "HOLA") ── */
.sf-circle-chat-bubble,
.circles-shell-page .sf-circle-chat-bubble,
body.feed-page.is-circle-chat-active .sf-circle-chat-bubble {
  width: fit-content;
  max-width: 100%;
  min-width: min(2.75rem, 100%);
  box-sizing: border-box;
}

/* ── Text: break words, not individual characters ── */
.sf-circle-chat-text,
.circles-shell-page .sf-circle-chat-text,
body.feed-page.is-circle-chat-active .sf-circle-chat-text {
  overflow-wrap: break-word;
  word-break: normal;
  white-space: pre-wrap;
}

/* ── Chat shell flex chain (circles desktop) ── */
.circles-shell-page .sf-circle-chat-root,
.circles-shell-page .sf-circle-chat.circle-chat-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.circles-shell-page .sf-circle-chat-scroll {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
}

.circles-shell-page .sf-circle-chat-messages {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

/* ── Composer controls: always styled ── */
.sf-circle-chat-form,
.circles-shell-page .sf-circle-chat-form,
.circles-shell-page .circle-chat-composer-form {
  display: flex;
  align-items: center;
}

.sf-circle-chat-form .sf-circle-chat-send,
.sf-circle-chat-form .sf-circle-chat-attach,
.circles-shell-page .sf-circle-chat-send,
.circles-shell-page .sf-circle-chat-attach {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.sf-circle-chat-input.fa-textarea,
.circles-shell-page .sf-circle-chat-input.fa-textarea {
  min-height: 40px;
  max-height: 120px;
  resize: none;
}

.sf-circle-chat-send svg,
.sf-circle-chat-attach svg {
  width: 1.25em;
  height: 1.25em;
  max-width: none;
  flex-shrink: 0;
}