.app, main { background: #dde4ea; }
.drawer {
  top: 4vh;
  right: 50%;
  width: min(960px, 86vw);
  height: 92vh;
  border-radius: 18px;
  overflow: hidden;
  transform: translateX(50%) scale(.96);
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 24px 80px rgba(10,29,25,.35);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.drawer.open {
  right: 50%;
  transform: translateX(50%) scale(1);
  opacity: 1;
  visibility: visible;
}
body:has(.drawer.open)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 4;
  background: rgba(15,35,31,.42);
  backdrop-filter: blur(2px);
}
.drawer .messages { padding: 26px 7%; }
.drawer .bubble { max-width: 72%; }
.drawer .composer { padding: 16px 22px; }
.column { background: #fff; border: 1px solid #d1d9e0; }
.panel { background: #fff; box-shadow: 0 1px 2px rgba(24,34,48,.04); }
.card { box-shadow: 0 2px 5px rgba(24,34,48,.10); }
.campaign-panel select,
.campaign-panel textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.campaign-panel textarea { min-height: 100px; resize: vertical; }
.campaign-timing { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }
.campaign-timing label { display: grid; gap: 5px; font-size: 12px; color: #566273; }
.campaign-timing input { width: 100%; padding: 9px; border: 1px solid var(--border); border-radius: 8px; }
.campaign-progress { margin: 12px 0; padding: 10px; border-radius: 8px; background: #eef6f3; color: #285348; font-size: 13px; }
.campaign-warning { font-size: 12px; color: #7a5d17; }
.pix-panel { width: 370px; max-width: calc(100vw - 24px); }
.pix-panel #pixQrPreview { display: block; width: 210px; max-width: 100%; margin: 8px auto 12px; border-radius: 8px; }
.pix-panel .pix-actions { flex-wrap: wrap; }
.settings-grid > .panel:nth-child(4) {
  max-height: 420px;
  overflow-y: auto;
  align-self: start;
  scrollbar-gutter: stable;
}
.settings-grid > .panel:nth-child(4) h3 {
  position: sticky;
  top: -17px;
  z-index: 1;
  margin: -17px -17px 12px;
  padding: 17px;
  background: white;
  border-bottom: 1px solid var(--border);
}
.settings-grid {
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  align-items: start;
  gap: 20px;
}
.settings-grid .panel {
  padding: 22px;
  border-color: #d5dde5;
  box-shadow: 0 3px 12px rgba(24,34,48,.06);
}
.settings-grid .panel h3 {
  margin: 0 0 14px;
  font-size: 19px;
  color: #173d35;
}
.settings-grid .panel > p:first-of-type {
  color: #687584;
  line-height: 1.45;
}
.settings-grid input:not([type="checkbox"]),
.settings-grid select,
.settings-grid textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #cfd8e2;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}
.settings-grid textarea { min-height: 105px; line-height: 1.4; resize: vertical; }
.settings-grid input:focus,
.settings-grid select:focus,
.settings-grid textarea:focus {
  outline: 3px solid rgba(18,107,86,.12);
  border-color: #27836c;
}
.settings-grid button { margin-top: 5px; }
.settings-grid .reply-setting {
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #e5eaf0;
}
.stage-automation-panel { grid-column: span 2; }
.stage-automation-panel .stage-rule { padding: 15px 0; }
.campaign-panel { grid-column: span 1; }
.settings-grid > .panel:nth-last-child(-n+2) {
  max-height: 720px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
@media (max-width: 1350px) {
  .settings-grid { grid-template-columns: repeat(2, minmax(300px, 1fr)); }
}
@media (max-width: 800px) { .campaign-timing { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .settings-grid { grid-template-columns: 1fr; gap: 14px; }
  .stage-automation-panel { grid-column: span 1; }
  .settings-grid .panel { padding: 17px; }
  .drawer,.drawer.open { top: 0; right: 0; width: 100%; height: 100vh; border-radius: 0; transform: none; }
  .drawer .messages { padding: 18px; }
  .drawer .bubble { max-width: 86%; }
}