/* ============================================================
   /bots (internal/pages/bots): the example cards and the
   differentiator cards. The rest of the page (the three ways, the portal
   band) still lives in integrations.css.
   ============================================================ */

/* /bots — "what you can build": a card per use case, each holding the bot
   message it would post (internal/pages/bots; the channel frame and
   the card itself are styled by dev-docs.css and action-message.css) */
.bots-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.bots-ex {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px;
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.bots-ex-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.bots-ex-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-50, rgba(0, 201, 86, 0.1));
  color: var(--green-600, #1f8a4c);
  font-size: 19px;
}

.bots-ex-head h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 2px 0 6px;
}

.bots-ex-head p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-600);
  margin: 0;
}

.bots-ex-stage {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bots-ex-stage .ddu-stage {
  flex: 1;
  box-shadow: 0 18px 40px -24px rgba(20, 26, 22, 0.5);
}

/* Newest at the bottom, as in a real channel, when a shorter example shares a
   row with a taller one. */
.bots-ex-stage .ddu-stage-body {
  flex: 1;
  justify-content: flex-end;
}

/* /bots — "more than a message-posting bot" */
.bots-diff {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.bots-diff-card {
  padding: 26px 24px;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.bots-diff-card .why-switch-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  margin: 0 0 16px;
}

.bots-diff-card .why-switch-icon i { font-size: 20px; }

.bots-diff-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}

.bots-diff-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-600);
  margin: 0;
}

@media (max-width: 980px) {
  .bots-examples { grid-template-columns: minmax(0, 1fr); }
  .bots-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  /* The section's own side padding sits inside the container's, which leaves
     the chat windows a third of a phone; the container's gutter is enough. */
  .bots-examples-section { padding-left: 0; padding-right: 0; }
  .bots-ex { padding: 18px 12px; gap: 18px; }
  .bots-ex-head { padding: 0 4px; }
  .bots-diff { grid-template-columns: minmax(0, 1fr); }
}