/* ============================================================
   Real mssgs app message rendering (action-message-*)

   Ported verbatim from the chat app's
   src/ui/chat-view/action-message.css so the docs bot-message
   previews render pixel-identical to the actual client. This is
   the app's DARK message styling (dark card, light text).

   Self-contained: the app's action-message.css referenced only
   one custom property (--text-primary, inside the voice-call
   rules which are not ported here and which already carried a
   #f2f3f5 fallback). Every other value is a literal, so the
   marketing site's cream light/dark theme cannot bleed into the
   card and the card cannot bleed into the site.

   Not ported (not needed for a static, non-interactive embed
   card preview): voice-call cards/dividers, image attachments
   and galleries, checkbox lists, fields tables, referenced
   quotes, the copy-to-clipboard button (hover-only), the
   hover-reveal timestamp, expiry countdown, trigger loading/
   error compact states, and "show more". The "show-more" base
   style IS kept because the collapsible thinking toggle reuses
   that class in the app.
   ============================================================ */

/* Isolation: pin the app's own font stack + box model so the
   marketing site's fonts/resets do not leak into the card.
   The app renders these messages with the OS sans stack. */
.action-message-container {
  font-family: ui-sans-serif, -apple-system, system-ui, 'Segoe UI', Helvetica,
    'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.action-message-container,
.action-message-container * {
  box-sizing: border-box;
}

/* Buttons/inputs do not inherit font-family by default — force it
   so action buttons use the app font, not the browser default. */
.action-message-container button {
  font-family: inherit;
}

/* Action Message Container Styles */
.action-message-container {
  padding: 4px 4px 0px 8px;
  border-left: 2px solid;
  margin-top: 4px;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
}

/* Container color schemes */
.action-message-container-orange {
  background-color: rgba(250, 166, 26, 0.15);
  border-left-color: #faa61a;
}

.action-message-container-green {
  background-color: rgba(74, 124, 89, 0.15);
  border-left-color: #4a7c59;
}

.action-message-container-red {
  background-color: rgba(218, 55, 60, 0.15);
  border-left-color: #da373c;
}

.action-message-container-blue {
  background-color: rgba(88, 101, 242, 0.15);
  border-left-color: #5865f2;
}

.action-message-container-purple {
  background-color: rgba(145, 70, 255, 0.15);
  border-left-color: #9146ff;
}

.action-message-container-yellow {
  background-color: rgba(254, 231, 92, 0.15);
  border-left-color: #fee75c;
}

.action-message-container-gray {
  background-color: rgba(155, 156, 162, 0.12);
  border-left-color: #9b9ca2;
}

.action-message-content {
  display: flex;
  flex-direction: row;
  padding-bottom: 0;
}

.action-message-image {
  width: 30px;
  height: 30px;
  margin-top: 0;
  margin-right: 12px;
  margin-left: 6px;
  position: relative;
  flex-shrink: 0;
}

.action-message-system-icon {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  object-fit: cover;
  background: #000000;
  display: block;
}

.action-message-avatar-overlay {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  position: absolute;
  bottom: -6px;
  right: -6px;
  border: 1px solid #2b2d31;
  background: #2b2d31;
}

.action-message-text {
  flex: 1;
  min-width: 0;
}

.action-message-inner-container {
  background-color: #2b2d31;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 4px;
  border: 1px solid #3f4044;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

.action-message-sub-title-badge {
  color: #b8b9bf;
  font-size: 12px;
  margin-left: 4px;
  line-height: 14px;
}

.action-message-title {
  color: #f3f3f3;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.action-message-title-link {
  color: #00a8fc;
  text-decoration: none;
  cursor: pointer;
}

.action-message-title-link:hover {
  text-decoration: underline;
}

.action-message-subtitle {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  margin: 0;
  word-break: break-word;
  overflow-wrap: break-word;
  color: #f3f3f3;
}

.action-message-description {
  color: #b8b9bf;
  font-size: 15px;
  line-height: 1.375;
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 300px;
  overflow-y: auto;
}

/* Inline code inside a description (authored example markup). The
   app renders fenced blocks via its own code-block component;
   inline <code> in the docs examples gets a subtle app-dark chip. */
.action-message-description code {
  font-family: 'SF Mono', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;
  font-size: 0.88em;
  background: #1e1f22;
  color: #dbdcde;
  padding: 1px 5px;
  border-radius: 4px;
}

.action-message-description strong {
  color: #f3f3f3;
  font-weight: 600;
}

.action-message-quote {
  border-left: 3px solid #4e5058;
  padding-left: 12px;
  margin: 8px 0;
  opacity: 0.7;
  color: #949ba4;
}

.action-message-quote-orange {
  border-left-color: #faa61a;
  color: #e0a65e;
  opacity: 1;
}

.action-message-description .action-message-quote:first-child {
  margin-top: 0;
}

.action-message-description .action-message-quote:last-child {
  margin-bottom: 0;
}

.action-message-system-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 8px;
}

.action-message-system-badge-text {
  color: #b8b9bf;
  font-size: 12px;
  margin-right: 4px;
  line-height: 14px;
}

.action-message-verified-icon-wrapper {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-message-verified-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  margin-bottom: -2px;
}

/* Title row — title text + inline status badge */
.action-message-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px 0;
}

.action-message-title-row .action-message-title {
  margin: 0;
}

/* Footer row — timestamp (left) + embed diff stats (right) */
.action-message-footer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.action-message-footer-row .action-message-footer-timestamp {
  margin-top: 0;
}

/* Embed meta — diff stats grouped at the right of the footer */
.action-message-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Status badge — small, subtle tinted pill next to the title */
.action-message-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.action-message-status-icon {
  display: inline-flex;
  align-items: center;
}

.action-message-status-icon svg {
  width: 11px;
  height: 11px;
}

/* Subtle tinted status colours (soft background + coloured text) */
.action-message-status-green {
  background: rgba(63, 185, 80, 0.28);
  color: #56d364;
}

.action-message-status-purple {
  background: rgba(163, 113, 247, 0.22);
  color: #b890f9;
}

.action-message-status-red {
  background: rgba(248, 81, 73, 0.22);
  color: #fa6d66;
}

.action-message-status-orange {
  background: rgba(227, 135, 60, 0.15);
  color: #e3873c;
}

.action-message-status-yellow {
  background: rgba(210, 169, 58, 0.15);
  color: #d3a93a;
}

.action-message-status-blue {
  background: rgba(79, 143, 247, 0.15);
  color: #4f8ff7;
}

.action-message-status-gray {
  background: rgba(255, 255, 255, 0.07);
  color: #9ea0a6;
}

.action-message-diff {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.action-message-additions {
  color: #3fb950;
}

.action-message-deletions {
  color: #f85149;
}

.action-message-files {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 500;
  color: #b8b9bf;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  white-space: nowrap;
}

.action-message-footer-timestamp {
  color: #949ba4;
  font-size: 12px;
  margin-top: 8px;
}

.action-message-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Show more — reused as the base style for the thinking toggle */
.action-message-show-more {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid #3f4044;
  border-radius: 4px;
  color: #b8b9bf;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.action-message-show-more:hover {
  background-color: #2b2d31;
  color: #dbdcde;
  border-color: #5a5d65;
}

/* Embed Loader State (bot still working on the card) */
.action-message-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.action-message-loader-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #404249;
  border-top-color: #b8b9bf;
  border-radius: 50%;
  animation: action-message-loader-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes action-message-loader-spin {
  to { transform: rotate(360deg); }
}

.action-message-loader-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.action-message-loader-text {
  color: #dcddde;
  font-size: 14px;
  line-height: 1.3;
}

.action-message-loader-sub-text {
  color: #949ba4;
  font-size: 12px;
  line-height: 1.3;
}

/* Action Buttons */
.action-button {
  border: 1px solid;
  border-radius: 4px;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  background: none;
}

.action-button-primary {
  background-color: #4a7c59;
  border-color: #5a8c69;
}

.action-button-primary:hover {
  background-color: #5a8c69;
  border-color: #6a9c79;
}

.action-button-secondary {
  background-color: #343539;
  border-color: #43494b;
}

.action-button-secondary:hover {
  background-color: #3c3d42;
  border-color: #4a4b50;
}

/* Collapsible thinking section (message_container.thinking) */
.action-message-thinking {
  margin-top: 4px;
}

/* In the app the body starts hidden via inline style and a click
   handler toggles it. Server-rendered here, so the toggle is
   driven by aria-expanded on the button. */
.action-message-thinking-body {
  display: none;
  margin-top: 8px;
  padding: 2px 10px;
  border-left: 2px solid #3f4044;
  color: #b8b9bf;
  font-size: 13px;
}

.action-message-thinking-toggle[aria-expanded="true"] + .action-message-thinking-body {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .action-message-loader-spinner { animation: none; }
}