/* ============ ENVELOPE TRIGGER BUTTON ============ */

.feedback-trigger{
  position:fixed;
  top:22px;
  right:300px;
  z-index:11;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(160deg, #163f40, #082627);
  border:1px solid rgba(212,175,55,0.5);
  box-shadow:0 8px 18px rgba(0,0,0,0.4);
  color:#f3dd93;
  cursor:pointer;
  padding:0;
  transition: transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.feedback-trigger svg{
  width:19px;
  height:19px;
}
.feedback-trigger:hover{
  transform:scale(1.08);
  border-color:#d4af37;
  box-shadow:0 0 0 3px rgba(212,175,55,0.18), 0 8px 18px rgba(0,0,0,0.4);
}
.feedback-trigger:active{
  transform:scale(0.98);
}

/* ============ BACKDROP ============ */

.feedback-backdrop{
  position:fixed;
  inset:0;
  background:rgba(6,15,20,0.72);
  display:flex;
  justify-content:center;
  z-index:1000;
  opacity:0;
  pointer-events:none;
  overscroll-behavior:contain;
  /* Deliberately no opacity transition and no scroll lock here.
     - Fading this full-viewport layer forced a viewport-sized layer to be
       rasterized on click (250-350ms stall on first open).
     - Toggling overflow:hidden on <html> rebuilt the layer tree for the whole
       ~9000px page on every open AND close (300-440ms).
     The panel's own lift+fade carries the motion, and scroll is blocked by a
     wheel handler in feedback.js, which costs nothing. */
}
.feedback-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

/* ============ MODAL: lifts into place ============ */

.feedback-modal{
  width:min(420px, 90vw);
  margin-top:90px;
  height:fit-content;
  padding:28px 26px 24px;
  border-radius:16px;
  background:linear-gradient(165deg, #10383a 0%, #082627 100%);
  border:1px solid rgba(212,175,55,0.4);
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
  position:relative;

  transform:translateY(-12px) scale(0.96);
  opacity:0;
  /* No will-change here. Promoting the panel up front forced a layer raster on
     first open (200-240ms). Left unpromoted it paints into the main layer, and
     Chrome promotes it automatically once the transform starts animating. */
  transition: transform 0.24s cubic-bezier(.22,1,.36,1), opacity 0.18s ease;
}
.feedback-backdrop.is-open .feedback-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}

.feedback-close{
  position:absolute;
  top:12px;
  right:16px;
  background:none;
  border:none;
  font-size:1.5rem;
  line-height:1;
  color:#f3dd93;
  cursor:pointer;
  opacity:0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.feedback-close:hover{
  opacity:1;
  transform:scale(1.1);
}

.feedback-modal h2{
  margin:0 0 6px;
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:1.3rem;
  color:#f3dd93;
}

.feedback-sub{
  margin:0 0 18px;
  font-family:'Cormorant Garamond', serif;
  font-size:1rem;
  color:rgba(244,232,204,0.75);
  line-height:1.4;
}

/* ============ FORM ============ */

.feedback-form textarea{
  width:100%;
  resize:vertical;
  min-height:120px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(212,175,55,0.3);
  background:rgba(244,232,204,0.06);
  color:#f4e8cc;
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
  line-height:1.5;
  outline:none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.feedback-form textarea::placeholder{
  color:rgba(244,232,204,0.4);
}
.feedback-form textarea:focus{
  border-color:#d4af37;
  box-shadow:0 0 0 3px rgba(212,175,55,0.15);
}

.feedback-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
}

.feedback-count{
  font-family:'Cormorant Garamond', serif;
  font-size:0.85rem;
  color:rgba(244,232,204,0.55);
}

.feedback-send{
  padding:9px 24px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,0.55);
  background:linear-gradient(160deg, #8a6f2b, #d4af37);
  color:#1a1206;
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:0.9rem;
  letter-spacing:0.02em;
  cursor:pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feedback-send:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(212,175,55,0.35);
}
.feedback-send:active{
  transform:translateY(0);
}

@media (max-width:480px){
  .feedback-trigger{
    top:14px;
    right:180px;
    width:36px;
    height:36px;
  }
  .feedback-trigger svg{
    width:17px;
    height:17px;
  }
  .feedback-modal{
    margin-top:70px;
    padding:22px 20px 20px;
  }
}