/* V1.0.271 - Inbox Facebook comment 24/7 + Auto Reply readability.
   Scoped to the Auto Reply dialog so no other module is affected. */

.auto-reply-dialog-v271{
  width:min(980px,calc(100vw - 32px))!important;
  max-height:94vh!important;
  border-color:#2469a8;
  background:
    radial-gradient(circle at 12% 0,rgba(33,126,255,.11),transparent 34%),
    linear-gradient(180deg,#071b33 0%,#061629 100%);
}
.auto-reply-dialog-v271 .modal-head{
  position:sticky;
  top:0;
  z-index:8;
  min-height:64px;
  padding:16px 18px;
  background:rgba(6,23,43,.96);
  backdrop-filter:blur(12px);
}
.auto-reply-dialog-v271 .modal-head h2{
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.2px;
  color:#f2f8ff;
}
.auto-reply-dialog-v271 .modal-head .icon-btn{
  width:36px;
  height:36px;
  font-size:22px;
}
.auto-reply-dialog-v271 .modal-body{
  padding:17px 18px 19px;
}
.auto-reply-dialog-v271 .modal-foot{
  position:sticky;
  bottom:0;
  z-index:8;
  padding:14px 18px;
  background:rgba(6,23,43,.97);
  backdrop-filter:blur(12px);
}
.auto-reply-dialog-v271 .modal-foot .btn{
  min-height:40px;
  padding:8px 16px;
  font-size:13px;
  font-weight:800;
}

.auto-reply-modal-v271{
  display:grid;
  gap:14px;
  color:#e8f3ff;
  font-size:14px;
  line-height:1.55;
}
.auto-reply-modal-v271 .auto-reply-master{
  min-height:78px;
  padding:15px 17px;
  border-color:#2486df;
  background:linear-gradient(135deg,rgba(20,107,193,.18),rgba(8,36,66,.6));
}
.auto-reply-modal-v271 .auto-reply-master b{
  font-size:15px;
  line-height:1.35;
  color:#f3f8ff;
}
.auto-reply-modal-v271 .auto-reply-master small{
  margin-top:5px;
  max-width:760px;
  font-size:13px;
  line-height:1.55;
  color:#a9bfd6;
}

.auto-reply-modal-v271 section{
  padding:15px 16px;
  border:1px solid #1d4b75;
  border-radius:11px;
  background:linear-gradient(180deg,rgba(7,31,56,.88),rgba(5,24,44,.88));
}
.auto-reply-modal-v271 section>header{
  gap:11px;
  margin-bottom:12px;
}
.auto-reply-modal-v271 section>header>span{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:8px;
  font-size:11px;
}
.auto-reply-modal-v271 section header h3{
  margin:0;
  font-size:17px;
  line-height:1.35;
  color:#eef7ff;
}
.auto-reply-modal-v271 section header p{
  margin:4px 0 0;
  font-size:13px;
  line-height:1.55;
  color:#9db4cc;
}

.auto-reply-modal-v271 .auto-reply-section-grid{
  gap:12px;
}
.auto-reply-modal-v271 .auto-reply-check-grid{
  gap:9px;
}
.auto-reply-modal-v271 .auto-reply-option-row{
  min-height:56px;
  padding:10px 12px;
  gap:12px;
  border-color:#20517e;
  background:#081d34;
}
.auto-reply-modal-v271 .auto-reply-option-row:hover{
  border-color:#2e8ce6;
  background:#0a2541;
}
.auto-reply-modal-v271 .auto-reply-option-label{
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  line-height:1.45;
  color:#e3effb;
}
.auto-reply-modal-v271 .auto-reply-option-label>b{
  font-size:14px;
  line-height:1.45;
  color:#eff7ff;
}
.auto-reply-modal-v271 .auto-reply-option-label small{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  line-height:1.5;
  color:#8fa9c3;
}
.auto-reply-modal-v271 .auto-reply-option-label svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin-top:1px;
}

.auto-reply-modal-v271 .auto-reply-toggle-control{
  min-width:82px;
  gap:8px;
}
.auto-reply-modal-v271 .auto-reply-toggle-control>.auto-reply-toggle-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.auto-reply-modal-v271 .auto-reply-toggle-control>.auto-reply-toggle-button:focus-visible{
  outline:2px solid #44a7ff;
  outline-offset:4px;
  border-radius:8px;
}
.auto-reply-modal-v271 .auto-reply-toggle-control>.auto-reply-toggle-button .auto-reply-toggle-track{
  width:40px;
  height:22px;
  flex-basis:40px;
}
.auto-reply-modal-v271 .auto-reply-toggle-track i{
  top:2px;
  left:2px;
  width:16px;
  height:16px;
}
.auto-reply-modal-v271 .auto-reply-toggle-control.is-on .auto-reply-toggle-track i{
  transform:translateX(18px);
}
.auto-reply-modal-v271 .auto-reply-toggle-control strong{
  min-width:26px;
  font-size:13px;
}

.auto-reply-modal-v271 .auto-reply-field{
  gap:6px;
  margin-top:10px;
}
.auto-reply-modal-v271 .auto-reply-field>span,
.auto-reply-modal-v271 .auto-reply-rule label>span,
.auto-reply-modal-v271 .auto-reply-feature-head>span{
  font-size:13px;
  line-height:1.45;
  font-weight:700;
  color:#a9bfd6;
}
.auto-reply-modal-v271 input,
.auto-reply-modal-v271 textarea{
  border-color:#28557f;
  background:#06172b;
  color:#f1f7ff;
  font-size:14px;
  line-height:1.55;
  padding:10px 11px;
}
.auto-reply-modal-v271 input{
  min-height:42px;
}
.auto-reply-modal-v271 textarea{
  min-height:92px;
}
.auto-reply-modal-v271 input::placeholder,
.auto-reply-modal-v271 textarea::placeholder{
  color:#6f89a4;
}
.auto-reply-modal-v271 input:focus,
.auto-reply-modal-v271 textarea:focus{
  outline:none;
  border-color:#3195f2;
  box-shadow:0 0 0 2px rgba(49,149,242,.16);
}

.auto-reply-modal-v271 .auto-reply-copy-grid{
  gap:10px;
}
.auto-reply-modal-v271 .auto-reply-feature-field{
  gap:8px;
  margin-top:9px;
}
.auto-reply-modal-v271 .auto-reply-feature-head{
  min-height:31px;
}
.auto-reply-modal-v271 .auto-reply-rule{
  grid-template-columns:160px 1fr 1.4fr;
  gap:9px;
  padding:11px;
  border-color:#214c73;
  border-radius:9px;
}
.auto-reply-modal-v271 .auto-reply-rule-head{
  min-height:31px;
  padding-bottom:7px;
}
.auto-reply-modal-v271 .auto-reply-rule-head>b{
  font-size:13.5px;
  color:#d6e6f5;
}
.auto-reply-modal-v271 .auto-reply-rule label{
  gap:6px;
}
.auto-reply-modal-v271 .auto-reply-rule textarea{
  min-height:78px;
}

.auto-reply-modal-v271 .auto-reply-safety{
  align-items:flex-start;
  gap:10px;
  padding:11px 13px;
  font-size:13px;
  line-height:1.55;
  border-color:#765d21;
  background:rgba(128,89,16,.12);
}
.auto-reply-modal-v271 .auto-reply-safety b{
  flex:0 0 auto;
  color:#ffd77d;
  font-size:13px;
}
.auto-reply-modal-v271 .auto-reply-safety span{
  color:#aec2d6;
}

@media(max-width:760px){
  .auto-reply-dialog-v271{
    width:calc(100vw - 16px)!important;
    max-height:96vh!important;
  }
  .auto-reply-dialog-v271 .modal-head,
  .auto-reply-dialog-v271 .modal-body,
  .auto-reply-dialog-v271 .modal-foot{
    padding-left:12px;
    padding-right:12px;
  }
  .auto-reply-dialog-v271 .modal-head h2{
    font-size:19px;
  }
  .auto-reply-modal-v271{
    gap:11px;
  }
  .auto-reply-modal-v271 .auto-reply-master{
    align-items:flex-start;
    flex-direction:column;
    gap:11px;
  }
  .auto-reply-modal-v271 .auto-reply-section-grid,
  .auto-reply-modal-v271 .auto-reply-copy-grid,
  .auto-reply-modal-v271 .auto-reply-check-grid,
  .auto-reply-modal-v271 .auto-reply-rule{
    grid-template-columns:1fr;
  }
  .auto-reply-modal-v271 .auto-reply-rule-head{
    grid-column:1;
  }
}