/* Button */
.mv-giphy-wrap{ margin:.5rem 0 .8rem; }
.mv-giphy-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#e7192e; color:#fff; border:0; border-radius:8px;
  padding:.5rem .9rem; font-weight:800; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}
.mv-gif-ico{
  width:16px; height:16px; display:inline-block;
  background: conic-gradient(#fff152 0 20%, #04ff8e 20% 40%, #00c5ff 40% 60%, #8e2eff 60% 80%, #ff5b5b 80% 100%);
  border-radius:3px;
}

/* Inside textarea option */
.mv-inside-textarea{ position:relative; }
.mv-inside-textarea .mv-giphy-wrap{
  position:absolute; left:8px; top:8px; margin:0;
}
.mv-inside-textarea .mv-giphy-btn{
  padding:.35rem .6rem; border-radius:999px;
  background:#111; color:#fff;
}

/* Modal */
.mv-giphy-modal[hidden]{ display:none; }
.mv-giphy-modal{ position:fixed; inset:0; z-index:9999; }
.mv-giphy-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.mv-giphy-dialog{
  position:relative; margin:4vh auto; max-width:880px; width:92%;
  background:#fff; border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; max-height:92vh;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}
.mv-giphy-head{ display:flex; gap:.5rem; padding:.8rem; border-bottom:1px solid #eee; }
.mv-giphy-search{ flex:1; padding:.6rem .8rem; border:1px solid #e5e7eb; border-radius:10px; font-weight:700; }
.mv-giphy-close{ border:0; background:#111; color:#fff; border-radius:10px; padding:.6rem .8rem; font-weight:800; cursor:pointer; }
.mv-giphy-tabs{ display:flex; gap:.4rem; padding:.6rem .8rem; border-bottom:1px solid #eee; }
.mv-giphy-tabs button{ border:1px solid #e5e7eb; background:#f7f7f7; border-radius:999px; padding:.3rem .7rem; font-weight:800; cursor:pointer; }
.mv-giphy-tabs .is-active{ background:#111; color:#fff; }
.mv-giphy-msg{ padding:.6rem .8rem; color:#b91c1c; font-weight:700; display:none; }
.mv-giphy-grid{ padding:.6rem; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:.6rem; }
.mv-giphy-grid img{ width:100%; height:160px; object-fit:cover; border-radius:10px; display:block; }
.mv-giphy-grid button{ border:0; background:transparent; cursor:pointer; padding:0; }
.mv-giphy-foot{ padding:.5rem .8rem; text-align:center; border-top:1px solid #eee; font-size:.85rem; }

@media (max-width:640px){
  .mv-giphy-dialog{ margin:0; width:100%; max-width:none; border-radius:0; max-height:100vh; }
  .mv-giphy-grid{ grid-template-columns:repeat(2, 1fr); }
}