/* The comment box's formatting toolbar and the action explanation box
   (shared/_rich_text_toolbar, shared/_rich_text_box; mention_controller.js). */
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.rich-toolbar-button {
  border: 1px solid #000; background: #fff; padding: 0.1rem 0.5rem; font-size: 0.75rem; line-height: 1.25rem; cursor: pointer;
}
.rich-toolbar-button:hover { background: #ccfbf1; }
.rich-text-input {
  border: 1px solid #000; padding: 0.5rem 0.75rem; font-size: 0.875rem; min-height: 5rem; max-height: 20rem; overflow-y: auto; background: #fff;
}
.mention-input ul { list-style: disc; padding-left: 1.25rem; }
.mention-input ol { list-style: decimal; padding-left: 1.25rem; }

/* The Actions panel on a work order: each action opens its own explanation form under the row of buttons. */
.work-order-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.work-order-actions > details[open] { flex-basis: 100%; order: 99; border: 2px solid #000; padding: 0.75rem; background: #f9fafb; }
.work-order-actions > details > summary { list-style: none; display: inline-block; }
.work-order-actions > details > summary::-webkit-details-marker { display: none; }
.work-order-actions > details[open] > summary { margin-bottom: 0.5rem; }
/* Once open, the action's button becomes the form's heading (click it again to close) — so there aren't two identical buttons. */
.work-order-actions > details[open] > summary {
  background: none; border: none; box-shadow: none; padding: 0; cursor: pointer;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; color: #000;
}
.work-order-actions > details[open] > summary::after { content: "  ✕ close"; font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b7280; }