.wa-automation-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  color: #172033;
}

.wa-automation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.page-eyebrow {
  color: #087D82;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.wa-automation-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.wa-automation-metrics article {
  min-height: 88px;
  border: 1px solid #DCE5EE;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  background: #FFFFFF;
}

.wa-metric-icon,
.wa-rule-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #EAF5F5;
  color: #087D82;
}

.wa-metric-icon.blue { background: #EAF1FF; color: #2C61B5; }
.wa-metric-icon.green { background: #E8F7EE; color: #168154; }
.wa-metric-icon.red { background: #FFF0F1; color: #B63B46; }

.wa-metric-icon .nav-icon,
.wa-rule-icon .nav-icon {
  width: 22px;
  height: 22px;
}

.wa-automation-metrics strong,
.wa-automation-metrics span {
  display: block;
}

.wa-automation-metrics strong {
  font-size: 24px;
  line-height: 1;
}

.wa-automation-metrics article div span {
  margin-top: 6px;
  color: #667386;
  font-size: 14px;
  font-weight: 700;
}

.wa-automation-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid #DCE5EE;
  margin-bottom: 16px;
}

.wa-automation-tabs button,
.wa-automation-tabs a {
  min-height: 48px;
  border: 0;
  border-bottom: 3px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: transparent;
  color: #425168;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}

.wa-automation-tabs button.active,
.wa-automation-tabs a.active {
  border-bottom-color: #009DA5;
  color: #087D82;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #A5AFBD;
}

.status-dot.on { background: #17A66B; }

.wa-automation-panel {
  display: none;
  border: 1px solid #DCE5EE;
  border-radius: 7px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(17, 31, 52, 0.05);
}

.quick-responses-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.quick-responses-header {
  align-items: center;
}

.quick-responses-header .btn {
  min-height: 42px;
}

.quick-responses-panel {
  overflow: hidden;
  border: 1px solid #DCE5EE;
  border-radius: 7px;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(17, 31, 52, 0.05);
}

.quick-responses-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 560px) auto;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #E3EAF1;
}

.quick-responses-toolbar > span {
  color: #667386;
  font-size: 14px;
  font-weight: 700;
}

.quick-responses-search {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid #CBD7E2;
  border-radius: 7px;
  background: #FFFFFF;
}

.quick-responses-search:focus-within {
  border-color: #009DA5;
  box-shadow: 0 0 0 3px rgba(0, 157, 165, 0.11);
}

.quick-responses-search .nav-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: #708097;
}

.quick-responses-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172033;
  font: inherit;
}

.quick-responses-table-wrap {
  padding: 0 18px 18px;
}

.quick-responses-table th button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  text-transform: inherit;
}

.quick-responses-table th button::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 5px solid #A4AFBD;
}

.quick-responses-table th button[data-direction='asc']::after {
  border-top: 0;
  border-bottom: 5px solid #087D82;
}

.quick-responses-table th button[data-direction='desc']::after {
  border-top-color: #087D82;
}

.quick-response-copy strong,
.quick-response-copy small {
  display: block;
}

.quick-response-actions {
  width: 96px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.quick-response-actions form {
  margin: 0;
}

.quick-response-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #CBD7E2;
  border-radius: 7px;
  background: #F7FAFC;
  color: #334258;
  cursor: pointer;
}

.quick-response-icon:hover {
  border-color: #8FCFD2;
  background: #EDF8F8;
  color: #087D82;
}

.quick-response-icon.danger {
  color: #B33D47;
}

.quick-response-icon.danger:hover {
  border-color: #E7B8BD;
  background: #FFF3F4;
}

.quick-response-icon .nav-icon {
  width: 18px;
  height: 18px;
}

.quick-response-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: auto;
  border: 1px solid #D6E0E9;
  border-radius: 8px;
  background: #FFFFFF;
  color: #172033;
  box-shadow: 0 24px 70px rgba(18, 31, 48, 0.28);
}

.quick-response-dialog::backdrop {
  background: rgba(18, 31, 48, 0.58);
}

.quick-response-dialog > form > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  border-bottom: 1px solid #E3EAF1;
}

.quick-response-dialog h2 {
  margin: 0;
  font-size: 21px;
}

.quick-response-dialog header p {
  margin: 3px 0 0;
  color: #667386;
  font-size: 14px;
}

.quick-response-dialog-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #E6F6F4;
  color: #008F91;
}

.quick-response-dialog-icon svg {
  width: 24px;
  height: 24px;
}

.quick-response-dialog-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 7px;
  background: #EEF2F5;
  color: #607086;
  cursor: pointer;
  font-size: 20px;
}

.quick-response-dialog-body {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
}

.quick-response-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: 11px;
}

.quick-response-dialog .form-group {
  gap: 6px;
  margin: 0;
}

.quick-response-dialog .form-group > small,
.quick-response-message > small {
  color: #748196;
  font-size: 12px;
}

.quick-response-message > small {
  text-align: right;
}

.quick-response-active {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #D8E2EA;
  border-radius: 7px;
  background: #F8FAFC;
  cursor: pointer;
}

.quick-response-active input {
  width: 18px;
  height: 18px;
  accent-color: #009DA5;
}

.quick-response-active span,
.quick-response-active strong,
.quick-response-active small {
  display: block;
}

.quick-response-active small {
  margin-top: 2px;
  color: #667386;
}

.quick-response-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 20px;
  border-top: 1px solid #E3EAF1;
  background: #FBFCFD;
}

@media (max-width: 760px) {
  .quick-response-form-grid { grid-template-columns: 1fr; }
  .quick-responses-toolbar { grid-template-columns: 1fr; }
  .quick-responses-toolbar > span { justify-self: start; }
}

.quick-response-copy small {
  max-width: 560px;
  margin-top: 4px;
  color: #667386;
  line-height: 1.4;
}

.wa-automation-panel.active { display: block; }

.wa-rule-header,
.wa-rule-footer,
.wa-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid #E3EAF1;
}

.wa-rule-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wa-rule-title h2,
.wa-activity-head h2 {
  margin: 0;
  font-size: 20px;
}

.wa-rule-title p,
.wa-activity-head p {
  margin: 4px 0 0;
  color: #667386;
  font-size: 15px;
}

.switch-control {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 15px;
}

.switch-control input {
  position: absolute;
  opacity: 0;
}

.switch-control > span {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #B5BFCC;
  transition: background 0.2s ease;
}

.switch-control > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 0.2s ease;
}

.switch-control input:checked + span { background: #009DA5; }
.switch-control input:checked + span::after { transform: translateX(20px); }

.wa-rule-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  padding: 20px;
  background: #F7F9FC;
}

.wa-rule-main {
  display: grid;
  gap: 18px;
}

.wa-form-grid {
  display: grid;
  gap: 14px;
}

.wa-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.wa-info-field,
.wa-rule-summary {
  border: 1px solid #DCE5EE;
  border-radius: 7px;
  background: #FFFFFF;
}

.wa-info-field {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
}

.wa-info-field span { color: #667386; font-size: 13px; font-weight: 700; }

.input-suffix {
  position: relative;
}

.input-suffix .input { padding-right: 52px; }

.input-suffix span {
  position: absolute;
  top: 50%;
  right: 12px;
  color: #667386;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 700;
}

.check-line {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #344255;
  font-size: 14px;
  font-weight: 700;
}

.check-line input {
  width: 18px;
  height: 18px;
  accent-color: #009DA5;
}

.wa-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.wa-template-field .textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.5;
}

.reception-config {
  display: grid;
  gap: 16px;
  border-top: 1px solid #DCE5EE;
  padding-top: 18px;
}

.assistant-behavior-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.assistant-behavior-head h3 {
  margin: 0;
  color: #1E304B;
  font-size: 18px;
}

.assistant-behavior-head p {
  max-width: 720px;
  margin: 4px 0 0;
  color: #667386;
  font-size: 14px;
  line-height: 1.45;
}

.assistant-version-badge {
  flex: 0 0 auto;
  border: 1px solid #B7DEE0;
  border-radius: 6px;
  padding: 5px 9px;
  color: #08777D;
  background: #EAF7F7;
  font-size: 12px;
  font-weight: 800;
}

.reception-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reception-field-option {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #DCE5EE;
  border-radius: 7px;
  padding: 10px 12px;
  background: #FFFFFF;
  color: #263244;
  cursor: pointer;
}

.reception-field-option:has(input:checked) {
  border-color: #72C7CA;
  background: #EFF9F9;
}

.reception-field-option input {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  accent-color: #009DA5;
}

.reception-field-option strong,
.reception-field-option small { display: block; }
.reception-field-option strong { font-size: 14px; }
.reception-field-option small { margin-top: 3px; color: #667386; font-size: 13px; }

.reception-handoff-message {
  min-height: 72px;
  resize: vertical;
  line-height: 1.45;
}

.reception-technical {
  border-top: 1px solid #E2E9F0;
  border-bottom: 1px solid #E2E9F0;
  padding: 12px 0;
}

.reception-technical summary {
  color: #31445D;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.reception-technical[open] summary { margin-bottom: 14px; }
.reception-technical > .form-group { margin-top: 12px; }
.reception-checks { display: grid; align-content: center; gap: 2px; }

.reception-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #506077;
  font-size: 13px;
  font-weight: 800;
}

.reception-flow span { display: inline-flex; align-items: center; gap: 6px; }
.reception-flow b {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #E3F4F4;
  color: #087D82;
}
.reception-flow i { width: 28px; height: 1px; background: #C8D5E0; }

.wa-variables {
  margin: -8px 0 0;
  color: #667386;
  font-size: 14px;
}

.wa-variables code {
  display: inline-block;
  margin: 3px 2px;
  border-radius: 4px;
  padding: 3px 6px;
  background: #EAF1F6;
  color: #31445D;
}

.wa-rule-summary {
  align-self: start;
  padding: 16px;
}

.wa-rule-summary h3 { margin: 0 0 12px; font-size: 17px; }

.wa-rule-summary > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #E7EDF3;
  padding: 12px 0;
  color: #667386;
  font-size: 14px;
}

.wa-rule-summary > div strong {
  max-width: 150px;
  color: #263244;
  text-align: right;
}

.wa-rule-summary p {
  margin: 8px 0 0;
  border-radius: 6px;
  padding: 11px;
  background: #EEF7F8;
  color: #42606A;
  font-size: 13px;
  line-height: 1.45;
}

.wa-rule-summary > .assistant-protections strong {
  color: #137758;
  line-height: 1.55;
}

.assistant-version-history {
  border-top: 1px solid #E7EDF3;
  padding-top: 12px;
}

.assistant-version-history summary {
  color: #31445D;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.assistant-version-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.assistant-version-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #EDF1F5;
  padding-top: 8px;
}

.assistant-version-item span,
.assistant-version-item small { display: block; }
.assistant-version-item strong { color: #263244; font-size: 13px; }
.assistant-version-item small { margin-top: 2px; color: #738095; font-size: 11px; }
.btn.compact { min-height: 32px; padding: 6px 9px; font-size: 12px; }

.wa-rule-footer {
  justify-content: flex-end;
  border-top: 1px solid #E3EAF1;
  border-bottom: 0;
}

.wa-activity-head { align-items: flex-start; }

.wa-activity-table td strong,
.wa-activity-table td small { display: block; }
.wa-activity-table td small { margin-top: 3px; color: #728095; }

@media (max-width: 1050px) {
  .wa-automation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-rule-body { grid-template-columns: 1fr; }
  .wa-rule-summary { width: 100%; }
  .reception-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .wa-automation-header,
  .wa-rule-header { align-items: flex-start; flex-direction: column; }
  .wa-form-grid.two,
  .wa-form-grid.three,
  .reception-fields { grid-template-columns: 1fr; }
  .wa-automation-metrics article { min-height: 74px; gap: 9px; padding: 11px; }
  .wa-metric-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .wa-automation-metrics strong { font-size: 21px; }
  .wa-automation-metrics article div span { font-size: 13px; }
  .assistant-behavior-head { align-items: flex-start; flex-direction: column; }
  .reception-flow { justify-content: flex-start; overflow-x: auto; }
}