.giphy-picker-panel {
  position: fixed !important;
  inset: auto;
  top: 16px;
  left: 16px;
  z-index: 5100 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  height: min(500px, calc(100vh - 100px));
  min-height: 430px;
  max-height: min(520px, calc(100vh - 100px));
  overflow: hidden;
  isolation: isolate;
}

.giphy-picker-panel[data-config-missing="true"] {
  height: auto;
  min-height: 0;
  max-height: none;
}

/* The composer’s legacy panel rule is inline in insta.html, so keep the portal sizing more specific. */
.composer-popover-panel.giphy-picker-panel {
  top: 16px;
  left: 16px;
  right: auto;
  bottom: auto;
  width: min(420px, calc(100vw - 32px)) !important;
  height: min(500px, calc(100vh - 100px)) !important;
  min-height: 430px !important;
  max-height: min(520px, calc(100vh - 100px)) !important;
}

.composer-popover-panel.giphy-picker-panel[data-config-missing="true"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.giphy-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}

.giphy-picker-header .popover-header-title {
  color: #1e293b;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}

.giphy-picker-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #64748b;
  background: #ffffff;
  cursor: pointer;
}

.giphy-picker-close:hover,
.giphy-picker-close:focus-visible {
  color: #0f172a;
  background: #f8fafc;
  outline: 2px solid rgba(99, 102, 241, 0.28);
  outline-offset: 2px;
}

.giphy-search-label {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
}

.giphy-search-input {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #dbe3ee;
  border-radius: 11px;
  color: #1e293b;
  background: #f8fafc;
  outline: none;
}

.giphy-search-input:focus {
  border-color: #8b7cf6;
  box-shadow: 0 0 0 3px rgba(139, 124, 246, 0.14);
}

.giphy-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 120px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  padding: 1px 2px 1px 0;
}

.giphy-result-button {
  min-width: 0;
  min-height: 88px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  background: #eef2f7;
  cursor: pointer;
}

.giphy-result-button:hover,
.giphy-result-button:focus-visible {
  outline: 2px solid #7c62f5;
  outline-offset: 2px;
}

.giphy-result-button img {
  display: block;
  width: 100%;
  height: 92px;
  object-fit: cover;
}

.giphy-picker-status,
.giphy-picker-empty {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 10px;
  border-radius: 11px;
  color: #64748b;
  background: #f8fafc;
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}

.giphy-picker-status--error {
  color: #9f1239;
  background: #fff1f2;
}

.giphy-picker-retry {
  flex: 0 0 auto;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d8d1ff;
  border-radius: 10px;
  color: #6247e5;
  background: #f5f2ff;
  font-weight: 800;
  cursor: pointer;
}

.giphy-attribution {
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 24px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.giphy-attribution img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.feed-post-media--giphy {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 0;
  background: #edf2f7;
  color: #64748b;
  cursor: pointer;
}

.feed-post-media.feed-post-media--giphy {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  max-height: 520px;
  display: block;
  background: #0f172a;
}

.feed-post-media.feed-post-media--giphy::before {
  display: none !important;
}

/* The container above is sized from the GIF's real width/height (set inline, per-post, by
   renderResolvedGif in giphy-picker.js), capped at 520px tall for very tall portrait GIFs. The
   image must fill that exact box (height: 100%, not auto/its own max-height) - a mismatch between
   the two was the actual bug: an unusually tall portrait GIF got a correctly tall container, but
   the image inside was independently capped at 520px and top-aligned, leaving a large solid
   #0f172a gap below it that read as a "black bar". object-fit: cover (not contain) crops any
   excess only when the capped container is squatter than the GIF's own ratio - for any GIF whose
   natural height already fits within the cap, the container and image end up the exact same
   shape, so cover renders identically to contain and normal GIFs are unaffected. */
.feed-post-media--giphy .giphy-post-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  background: #0f172a;
}

.giphy-post-slot {
  width: 100%;
}

.giphy-loading-message,
.giphy-unavailable-message {
  padding: 18px;
  font-size: 0.82rem;
  font-weight: 700;
}

.giphy-report-link {
  display: inline-flex;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  color: #64748b;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.giphy-report-link:hover,
.giphy-report-link:focus-visible {
  color: #be123c;
  text-decoration: underline;
}

.giphy-report-link:disabled {
  color: #94a3b8;
  cursor: default;
  text-decoration: none;
}

.giphy-report-overlay[hidden] {
  display: none !important;
}

.giphy-report-overlay {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: grid;
  place-items: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.34);
  overscroll-behavior: contain;
}

.giphy-report-dialog {
  width: min(430px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 32px));
  overflow-y: auto;
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid #ece8f4;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(30, 41, 59, 0.24), 0 8px 24px rgba(124, 98, 245, 0.12);
  color: #1e293b;
}

.giphy-report-header,
.giphy-report-heading,
.giphy-report-footer {
  display: flex;
  align-items: center;
}

.giphy-report-header {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.giphy-report-heading {
  min-width: 0;
  gap: 11px;
}

.giphy-report-icon {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  color: #e11d48;
  background: #fff1f2;
  font-size: 0.95rem;
}

.giphy-report-heading h2 {
  margin: 0;
  color: #172033;
  font-size: 1.12rem;
  line-height: 1.2;
}

.giphy-report-heading p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
}

.giphy-report-close {
  display: grid;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #64748b;
  background: #f8fafc;
  cursor: pointer;
}

.giphy-report-close:hover,
.giphy-report-close:focus-visible {
  color: #172033;
  background: #eef2ff;
  outline: 2px solid rgba(99, 102, 241, 0.24);
  outline-offset: 2px;
}

.giphy-report-fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.giphy-report-legend {
  margin-bottom: 3px;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 800;
}

.giphy-report-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.giphy-report-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.giphy-report-option-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 39px;
  padding: 8px 10px;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  color: #334155;
  background: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.giphy-report-option-card:hover {
  border-color: #c4b5fd;
  background: #faf9ff;
}

.giphy-report-option input:focus-visible + .giphy-report-option-card {
  outline: 2px solid rgba(99, 102, 241, 0.35);
  outline-offset: 2px;
}

.giphy-report-option input:checked + .giphy-report-option-card {
  border-color: #7c62f5;
  color: #4c35c5;
  background: #f6f3ff;
  box-shadow: 0 0 0 2px rgba(124, 98, 245, 0.09);
}

.giphy-report-radio {
  display: grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  background: #ffffff;
}

.giphy-report-option input:checked + .giphy-report-option-card .giphy-report-radio {
  border-color: #7c62f5;
  background: #7c62f5;
  box-shadow: inset 0 0 0 4px #ffffff;
}

.giphy-report-details {
  position: relative;
  margin-top: 13px;
}

.giphy-report-details-label {
  display: block;
  margin-bottom: 6px;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 800;
}

.giphy-report-details-label span {
  color: #94a3b8;
  font-weight: 600;
}

.giphy-report-details textarea {
  display: block;
  width: 100%;
  min-height: 72px;
  padding: 10px 11px 23px;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid #dbe3ee;
  border-radius: 11px;
  color: #1e293b;
  background: #f8fafc;
  font: inherit;
  font-size: 0.8rem;
  outline: none;
}

.giphy-report-details textarea:focus {
  border-color: #8b7cf6;
  box-shadow: 0 0 0 3px rgba(139, 124, 246, 0.14);
}

.giphy-report-counter {
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 700;
}

.giphy-report-error {
  margin: 12px 0 0;
  padding: 9px 10px;
  border-radius: 10px;
  color: #9f1239;
  background: #fff1f2;
  font-size: 0.76rem;
  line-height: 1.35;
}

.giphy-report-footer {
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.giphy-report-cancel,
.giphy-report-submit {
  min-height: 37px;
  padding: 8px 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.giphy-report-cancel {
  border: 1px solid #e2e8f0;
  color: #475569;
  background: #ffffff;
}

.giphy-report-cancel:hover,
.giphy-report-cancel:focus-visible {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.giphy-report-submit {
  border: 1px solid #6247e5;
  color: #ffffff;
  background: #6247e5;
  box-shadow: 0 7px 15px rgba(98, 71, 229, 0.2);
}

.giphy-report-submit:hover:not(:disabled),
.giphy-report-submit:focus-visible:not(:disabled) {
  background: #5338ce;
}

.giphy-report-submit:disabled {
  border-color: #cbd5e1;
  color: #94a3b8;
  background: #e2e8f0;
  box-shadow: none;
  cursor: not-allowed;
}

.giphy-report-cancel:focus-visible,
.giphy-report-submit:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.32);
  outline-offset: 2px;
}

/* Delete-post confirmation: same overlay/dialog/header/footer/cancel-button styling as the GIF/
   media report dialog above (.giphy-report-overlay/-dialog/-header/-heading/-footer/-cancel) -
   only the destructive Delete button needs its own color variant, layered after
   .giphy-report-submit above so it doesn't need !important to win. */
.delete-confirm-dialog {
  width: min(360px, calc(100vw - 32px));
}

.delete-confirm-overlay {
  z-index: 11000;
}

.delete-confirm-message {
  margin: 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.5;
}

.delete-confirm-destructive {
  border-color: #dc2626;
  color: #ffffff;
  background: #dc2626;
  box-shadow: 0 7px 15px rgba(220, 38, 38, 0.22);
}

.delete-confirm-destructive:hover:not(:disabled),
.delete-confirm-destructive:focus-visible {
  background: #b91c1c;
  outline: 2px solid rgba(220, 38, 38, 0.32);
  outline-offset: 2px;
}

.giphy-report-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 7100;
  max-width: calc(100vw - 32px);
  padding: 11px 15px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 999px;
  color: #ffffff;
  background: #1e293b;
  box-shadow: 0 10px 26px rgba(30, 41, 59, 0.22);
  font-size: 0.78rem;
  font-weight: 800;
  transform: translateX(-50%);
}

@media (max-width: 520px) {
  .giphy-picker-panel {
    top: 12px;
    left: 12px;
    width: calc(100vw - 24px);
    height: min(520px, calc(100vh - 48px));
    min-height: 0;
    max-height: calc(100vh - 48px);
    border-radius: 20px;
  }

  .composer-popover-panel.giphy-picker-panel {
    top: 12px;
    left: 12px;
    right: auto;
    bottom: auto;
    width: calc(100vw - 24px) !important;
    height: min(520px, calc(100vh - 48px)) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 48px) !important;
  }

  .giphy-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .giphy-report-overlay {
    padding: 10px;
  }

  .giphy-report-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 18px;
    border-radius: 20px;
  }
}