/* Role modules reuse sticky rows, role tiles, log status pills and channel pickers. */
.dev-role-automation { min-width: 0; color: #e2e8f0; }
.dev-role-automation [hidden] { display: none !important; }
.dev-role-editor > h3 { margin: 0 0 18px; color: #e2e8f0; font-size: 16px; }
.dev-role-editor > .spanel-channel-field { margin-bottom: 20px; }
.dev-role-automation .dev-sticky-toolbar > span { color: #94a3b8; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dev-role-automation .dev-sticky-meta { display: flex; align-items: center; gap: 6px; }
.dev-role-automation .dev-sticky-meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.dev-spanel .dev-module-dialog .dev-role-new { background: #14634f; color: #effff8; border-color: #2e8b70; }
.dev-spanel .dev-module-dialog .dev-role-new:not(:disabled):is(:hover,:focus-visible) { background: #19765e; color: #effff8; border-color: #49b18f; }
.dev-role-new > svg { width: 17px; height: 17px; transition: transform .22s; }
.dev-role-new:is(:hover,:focus-visible) > svg { transform: rotate(90deg); }
.dev-role-automation [data-role-edit]:is(:hover,:focus-visible) svg { animation: dev-edit-scribble .4s ease; }
.dev-role-automation [data-role-publish]:is(:hover,:focus-visible) svg { transform: translate(1px,-1px) scale(1.08); }
.dev-role-duration { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.dev-role-duration svg { width:16px; height:16px; flex:0 0 16px; color:inherit; }
.dev-role-editor > .dev-sticky-field > .dev-field-label > svg { color:#94a3b8; }
.dev-role-options { margin: 12px 0 20px; max-height: 250px; overflow-y: auto; overscroll-behavior: contain; }
.dev-role-remove { justify-content: flex-start; gap: 12px; }
.dev-role-preview-label { display: flex; align-items: center; gap: 8px; color: #cbd5e1; font-size: 13px; }
.dev-role-preview-label svg { width: 17px; height: 17px; color: #94a3b8; }
.dev-role-preview { padding: 16px 20px; border-left: 4px solid #14634f; border-radius: 4px 12px 12px 4px; background: rgba(148,163,184,.08); color: #e2e8f0; overflow-wrap: anywhere; }
.dev-role-preview > p { white-space: pre-wrap; }
.dev-role-preview > p > span { color: #a89aff; }
.dev-reaction-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 28px; }
.dev-reaction-chip { box-sizing: border-box; display: inline-flex; align-items: center; padding: 2px; border: 1px solid rgba(148,163,184,.18); border-radius: 10px; background: rgba(148,163,184,.07); }
.dev-role-automation .dev-reaction-chip > button,.dev-role-automation .dev-reaction-add { box-sizing: border-box; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 4px; border: 0; border-radius: 7px; background: transparent; color: #e2e8f0; font-size: 20px; line-height: 1; cursor: pointer; transition: background .18s,transform .18s; -webkit-tap-highlight-color: transparent; }
.dev-role-automation .dev-reaction-chip > .dev-reaction-remove { width: 26px; color: #f87171; }
.dev-reaction-remove > svg { width: 15px; height: 15px; transition: transform .18s; }
.dev-role-automation .dev-reaction-add { width: 36px; height: 36px; border: 1px solid rgba(96,217,179,.25); border-radius: 10px; background: rgba(20,99,79,.2); color: #60d9b3; }
.dev-reaction-add > svg { width: 20px; height: 20px; transition: transform .2s; }
.dev-reaction-add:not(:disabled):hover > svg { transform: rotate(90deg); }
.dev-reaction-chip > button:not(:disabled):hover { background: rgba(148,163,184,.12); }
.dev-reaction-chip > button:not(:disabled):active,.dev-reaction-add:not(:disabled):active { transform: scale(.94); }
.dev-reaction-chip > button:disabled,.dev-reaction-add:disabled { opacity: .4; cursor: not-allowed; }
.dev-reaction-management { display: grid; gap: 12px; margin-bottom: 24px; }
.dev-reaction-management > h3 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dev-reaction-management > h3 > small { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; color: #94a3b8; }
.dev-reaction-management .panel-info-note,.dev-reaction-empty { margin: 0 0 4px; color: #94a3b8; font-size: 12px; line-height: 1.65; }
.dev-reaction-mapping { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(230px,34%); align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(148,163,184,.13); border-radius: 13px; background: rgba(148,163,184,.035); }
.dev-reaction-symbol { font-size: 28px; text-align: center; }
.dev-reaction-symbol .dev-custom-emoji { width: 28px; height: 28px; }
.dev-reaction-chip .dev-custom-emoji { width: 20px; height: 20px; }
.dev-reaction-name { min-width: 0; color: #b6c2cf; font-size: 13px; overflow-wrap: anywhere; }
.dev-reaction-info { width: 26px; height: 26px; flex-basis: 26px; padding: 4px; }
.dev-reaction-info > svg { width: 17px; height: 17px; }
.dev-reaction-mapping > .spanel-channel-field { min-width: 0; margin: 0; }
.dev-reaction-mapping .dev-ticket-picker > label { display: none !important; }
@media (max-width: 600px) {
  .dev-reaction-mapping { grid-template-columns: 32px minmax(0,1fr); gap: 9px; padding: 10px; }
  .dev-reaction-mapping > .spanel-channel-field { grid-column: 1/-1; }
}
@media (max-width: 600px) {
  .dev-role-automation :is([data-role-preview-heading],.dev-role-preview) { display: none; }
  .dev-role-automation .dev-sticky-row { flex-wrap: wrap; gap: 8px; }
  .dev-role-automation .dev-sticky-row-copy { flex: 1 1 110px; }
  .dev-role-automation .dev-sticky-row-actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-role-automation svg { transition: none !important; animation: none !important; transform: none !important; }
  .dev-reaction-chip > button,.dev-reaction-add { transition: none; transform: none !important; }
}