/* Stage 2: visual polish for Groups, Direct and Support message threads.
   Presentation only; message transport and API semantics stay unchanged. */

.conversation-reference-surface {
  --thread-canvas: #ffffff;
  --thread-border: #dfe8ec;
  --thread-muted: #768793;
  --thread-incoming-name: #2b79c2;
  --thread-outgoing: #0f747b;
  --thread-outgoing-strong: #08646b;
}

.conversation-reference-surface .admin-inbox-thread-messages,
.conversation-reference-surface .group-message-list {
  gap: 10px;
  padding: 16px 18px 14px;
  background: var(--thread-canvas);
}

.conversation-reference-surface .conversation-message-row {
  gap: 9px;
  align-items: flex-end;
}

.conversation-reference-surface .conversation-message-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  flex-basis: 30px;
  border-width: 1px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
  font-size: 0.61rem;
}

.conversation-reference-surface .conversation-message-row .direct-message-bubble {
  max-width: min(56%, 560px);
  padding: 9px 12px 8px;
  border-color: var(--thread-border);
  border-radius: 12px 12px 12px 4px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  font-size: 0.82rem;
  line-height: 1.45;
}

.conversation-reference-surface .conversation-message-row.mine .direct-message-bubble {
  border-color: #0d6d73;
  border-radius: 12px 12px 4px 12px;
  background: linear-gradient(145deg, var(--thread-outgoing), var(--thread-outgoing-strong));
  box-shadow: 0 3px 10px rgba(8, 100, 107, 0.14);
}

.conversation-reference-surface .direct-message-bubble .message-sender-label {
  margin: 0 22px 4px 0;
  color: var(--thread-incoming-name);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.005em;
}

.conversation-reference-surface .direct-message-bubble p,
.conversation-reference-surface .direct-message-bubble .message-text,
.conversation-reference-surface .direct-message-bubble .group-message-text {
  font-size: 0.82rem;
  line-height: 1.45;
}

.conversation-reference-surface .conversation-message-meta {
  gap: 4px;
  margin-top: 4px;
  color: var(--thread-muted);
  font-size: 0.58rem;
  font-weight: 600;
}

.conversation-reference-surface .conversation-message-row.mine .conversation-message-meta {
  color: rgba(255, 255, 255, 0.78);
}

.conversation-reference-surface .conversation-sent-indicator {
  font-size: 0.69rem;
  letter-spacing: -0.08em;
}

.conversation-reference-surface .message-action-trigger {
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  opacity: 0.55;
}

.conversation-reference-surface .direct-message-bubble:hover .message-action-trigger,
.conversation-reference-surface .direct-message-bubble:focus-within .message-action-trigger {
  opacity: 0.9;
}

.conversation-reference-surface .conversation-system-row,
.conversation-reference-surface [data-system-message],
.conversation-reference-surface .system-message,
.conversation-reference-surface .group-system-message,
.conversation-reference-surface .message-system-event {
  width: calc(100% - 4px);
  margin: 2px auto;
  padding: 8px 12px;
  border: 1px solid #dde8eb;
  border-radius: 8px;
  background: #fbfdfd;
  box-shadow: none;
  color: #39757a;
  font-size: 0.69rem;
  font-weight: 650;
  line-height: 1.35;
}

.conversation-reference-surface .message-live-typing,
.conversation-reference-surface .conversation-typing-row,
.conversation-reference-surface [data-typing-indicator],
.conversation-reference-surface .typing-indicator,
.conversation-reference-surface .message-typing {
  max-width: min(64%, 340px);
}

.conversation-reference-surface .message-live-typing-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  flex-basis: 30px;
}

.conversation-reference-surface .message-live-typing-bubble {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 12px 12px 12px 4px;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05);
  font-size: 0.69rem;
}

.conversation-reference-surface .direct-message-composer,
.conversation-reference-surface .group-message-composer {
  padding: 8px 10px 10px;
  background: #fbfdfd;
}

.conversation-reference-surface .message-composer-bar {
  min-height: 44px;
  padding: 3px 4px;
  border-color: #dce7eb;
  border-radius: 23px;
  box-shadow: 0 4px 13px rgba(15, 23, 42, 0.07);
}

.conversation-reference-surface .message-composer-input {
  min-height: 36px;
  padding-block: 8px;
  font-size: 0.8rem;
}

@media (min-width: 1181px) {
  .conversation-reference-surface .admin-inbox-thread-messages,
  .conversation-reference-surface .group-message-list {
    padding-inline: 20px;
  }
}

@media (max-width: 900px) {
  .conversation-reference-surface .conversation-message-row .direct-message-bubble {
    max-width: min(72%, 520px);
  }
}

@media (max-width: 700px) {
  .conversation-reference-surface .admin-inbox-thread-messages,
  .conversation-reference-surface .group-message-list {
    gap: 8px;
    padding: 11px 8px 12px;
  }

  .conversation-reference-surface .conversation-message-avatar,
  .conversation-reference-surface .message-live-typing-avatar {
    width: 27px;
    height: 27px;
    min-width: 27px;
    flex-basis: 27px;
  }

  .conversation-reference-surface .conversation-message-row .direct-message-bubble {
    max-width: calc(100% - 38px);
    padding: 8px 10px 7px;
    font-size: 0.79rem;
  }

  .conversation-reference-surface .direct-message-bubble p,
  .conversation-reference-surface .direct-message-bubble .message-text,
  .conversation-reference-surface .direct-message-bubble .group-message-text {
    font-size: 0.79rem;
  }

  .conversation-reference-surface .direct-message-composer,
  .conversation-reference-surface .group-message-composer {
    padding: 6px 6px 8px;
  }
}